Question

我想在屏幕中间的所有其他元素上方放置一个div，以使其无法单击并用背景覆盖它们。

.myElement {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 1;
    background: white;
}

到目前为止，我仅设法使元素居中。但是，白色背景不能覆盖整个屏幕，它可以覆盖屏幕的1/4，并且确实允许单击其下面的其他元素。

我是.css样式的新手，所以很高兴有人可以帮助我实现所需的结果。

Answer 1

尝试一下：

html, body{
  width:100%;
  height:100%;
  margin:auto;
  overflow:hidden;
}
.content{
  width:100%;
  height:100%;
  position:relative;
  margin:auto;
  padding:0px;
  text-align:center;
  background-color:#607d8b;
}
.content h1{
  margin:auto;
  color:#fff;
}
.overlay{
  width:50%;
  height:50%;
  position:fixed;
  top:25%;
  left:25%;
  z-index:100;
  background-color:#becbd2;
  text-align:center;
}

/*or if you want to use a static values do this:*/

/*.overlay{
  width:200px;
  height:200px;
  position:fixed;
  top:25%;
  margin-top:-100px //Half of height;
  left:25%;
  margin-left:-100px //Half of width;
  z-index:100;
  background-color:#becbd2;
  text-align:center;
}*/

<div class="content">
  <h1>Page content</h1>
</div>
<div class="overlay">
  <h1>Overlay content</h1>
</div>

Answer 2

如@TemaniAfif所述，首先设置top: 0; left: 0;，然后设置width: 100%; height: 100%;。这会将div的height和width属性设置为其容器大小（在本例中为body）。

这是您的代码：

.hiddenDiv {
    width: 25%;
    height: 25%;
    background: blue;
}

.myElement {
    position: absolute;
    top: 0%;
    left: 0%;
    width: 100%;
    height: 100%;
    vertical-align: center;
    z-index: 1;
    background: red;
}

<div class = hiddenDiv>
This div is hidden
</div>

<div class = myElement>
This is a cover
</div>

CSS-将元素置于其他元素之上并位于屏幕中间

2 个答案: