Z-index值高的元素不一定会覆盖低值的元素。

可以使用以下代码解决：

HTML：

<div class="container">
  <div class="element lower"></div>
  <div class="element higher"></div>
</div>

CSS：

.container {
  position: relative;
}
.element {
  position: absolute;
  width: 100px;
  height: 100px;
  opacity: 0.8;
}
.lower {
  background-color: blue;
  left: 50px;
  top: 50px;
  z-index: 1;
}
.higher {
  background-color: red;
  left: 70px;
  top: 70px;
  z-index: 2;
}

我们在 .container 上设置了 position: relative，让内部的绝对定位元素都将以此元素为相对定位元素。 .lower 的 z-index 值为 1，.higher 的 z-index 值为 2，这样 .higher 就会比 .lower 更高。

当两个元素重叠时，如果 .higher 的 z-index 值比 .lower 更高，那么 .higher 就能够覆盖 .lower。

注意：当两个元素的 z-index 值相同时，它们的层叠顺序取决于它们在 HTML 中的先后顺序。最后一个元素会出现在上层。