Question

我正在尝试创建div，作为要放置在整个窗口上方的遮罩。其不透明度为0.5，背景色为lightgray。但是屏幕上应该没有一个div受mask div的影响。我尝试将其z-index设置为高于遮罩，但是它不起作用。代码如下：

.parent {
  height: 300px;
  background-color: red;
}

.sub1 {
  height: 100px;
  background-color: yellow;
  z-index: 10;
  opacity: 1;
}

.mask {
  position: fixed;
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
  opacity: 0.5;
  background-color: lightgray;
  z-index: 1;
}

    <div class="parent">
      
      <div class="sub1">
        hello
      </div>
      
      <div class="mask">
      </div>
    </div>

如您所见，我希望将sub1 div放在mask的顶部，但不是。它仍然显示为0.5 opacity。

也可以从https://codepen.io/zhaoyi0113/pen/vzERYY运行完整代码。

Answer 1

您需要向position添加.sub1属性，否则z-index无法正常工作

z-index CSS属性指定定位元素的z顺序
_{z-index | MDN Docs}

我建议使用position: relative;，因为这不会影响您的文档流程。

.sub1 {
  height: 100px;
  background-color: yellow;
  z-index: 10;
  opacity: 1;
  position: relative;
}

Answer 2

您可以使用calc()并设置mask的高度减去sub的高度，即100px，还可以从position: fixed CSS中删除mask。因此，下面是mask的CSS：

.mask {
  left: 0;
  top: 0;
  width: 100%;
  height: -webkit-calc(100% - 100px);
  height: -moz-calc(100% - 100px);
  height: calc(100% - 100px);
  opacity: 0.5;
  background-color: lightgray;
  z-index: 1;
}

以下正在运行演示：

.parent {
  height: 300px;
  background-color: red;
}

.sub1 {
  height: 100px;
  background-color: yellow;
  z-index: 10;
  opacity: 1;
}

.mask {
  left: 0;
  top: 0;
  width: 100%;
  height: -webkit-calc(100% - 100px);
  height: -moz-calc(100% - 100px);
  height: calc(100% - 100px);
  opacity: 0.5;
  background-color: lightgray;
  z-index: 1;
}

<div class="parent">
  
  <div class="sub1">
    hello
  </div>
  
  <div class="mask">
  </div>
</div>

可工作的Codepen here。

除了同胞div以外，如何在全屏上制作蒙版div？

2 个答案: