html - 绝对定位元素隐藏它前面的透明元素

Question

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

.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

This property is assigned with an integer value (positive or negative), which represents the position of the element along the z-axis. If you are not familiar with the z-axis, imagine the page has several layers one above the other. Each layer is numbered. A layer with a greater number is rendered above layers with smaller numbers.

---

.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;
}

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