Question

我有三个块元素彼此相邻，第一个和最后一个是透明的，中间的是绝对定位的：

.box {
  width: 300px;
  height: 300px;
}
.box1 {
  background: yellow;
  opacity: 0.5;
}
.box2 {
  background: red;
  position: absolute;
  left: 0;
  top: 0;
  width: 800px;
  height: 800px;
}
.box3 {
  background: black;
  opacity: 0.5;
}

<div class="box box1"></div>
<div class="box box2"></div>
<div class="box box3"></div>

由于.box1和.box3设置为opacity:0.5，我认为它们都会显示.box2，但只有.box3。为什么呢？

Answer 1

您可以使用z-index（最大的数字在顶部，最低的数字在向下）。

了解详情：

Adding z-index

此属性分配有一个整数值（正数或负数），表示元素沿z轴的位置。如果你不熟悉z轴，想象一下页面上面有几层。每层都有编号。具有较大数字的图层将在具有较小数字的图层上方呈现。

＆＃13;

.box {
  position:relative;
  width: 300px;
  height: 300px;
}
.box1 {
  z-index:20;
  background: yellow;
  opacity: 0.5;
}
.box2 {
  z-index:10;
  background: red;
  position: absolute;
  left: 0;
  top: 0;
  width: 800px;
  height: 800px;
}
.box3 {
  z-index:30;
  background: black;
  opacity: 0.5;
}

＆＃13;

<div class="box box1"></div>
<div class="box box2"></div>
<div class="box box3"></div>

＆＃13;

Answer 2

Box2在您的示例中作为容器的角色。

要解决此问题，您必须更改DOM结构这不是唯一的解决方案，但我认为更好。

＆＃13;

.box-container {
  background: red;
  width: 800px;
  height: 800px;
}
.box {
  width: 400px;
  height: 400px;
}
.box1 {
  background: yellow;
  opacity: 0.5;
}
.box2 {
  background: black;
  opacity: 0.5;
}

＆＃13;

<div class="box-container">
  <div class="box box1"></div>
  <div class="box box2"></div>
</div>

＆＃13;

绝对定位的元素隐藏在它之前的透明元素

2 个答案: