如何通过CSS调整层叠顺序，使.box显示在.cover之上而.case被遮罩？

CSS层叠顺序调整：让.box在.cover之上显示，同时.case被.cover遮罩

处理CSS层叠顺序时，常常会遇到一些复杂的问题。今天我们要解决的问题是如何在不改变HTML结构的情况下，仅通过修改CSS，使得.box元素显示在.cover之上，而.case元素被.cover遮罩。

首先，我们来看一下原始的HTML和CSS代码：

.container {
  height: 100vh;
  background: #000;
  .cover {
    position: fixed;
    background: rgba(255, 255, 255, 0.8);
    width: 100%;
    height: 100%;
    left: 0;
    bottom: 0;
    z-index: 999;
  }
  .case {
    position: fixed;
    z-index: 100;
    width: 800px;
    height: 400px;
    left: 50%;
    top: 50%;
    margin-left: -400px;
    margin-top: -200px;
    background: #fff;
    display: flex;
    .box {
      width: 300px;
      height: 200px;
      background: #000;
      position: fixed;
      left: 50%;
      top: 50%;
      margin-left: -150px;
      margin-top: -100px;
      z-index: 99999;
    }
  }
}

在原始代码中，.cover的z-index设置为999，而.box的z-index设置为99999，看起来.box应该在.cover之上，但实际效果可能不符合预期。

为了解决这个问题，我们需要调整CSS中的z-index值，并确保.container有一个相对定位的上下文。以下是调整后的CSS代码：

造好物

一站式AI造物设计平台

下载

立即学习“前端免费学习笔记（深入）”；

.container {
  height: 100vh;
  background: #000;
  position: relative;
  .cover {
    position: fixed;
    background: rgba(255, 255, 255, 0.8);
    width: 100%;
    height: 100%;
    left: 0;
    bottom: 0;
    z-index: 99;
  }
  .case {
    position: fixed;
    z-index: 100;
    width: 800px;
    height: 400px;
    left: 50%;
    top: 50%;
    margin-left: -400px;
    margin-top: -200px;
    background: #fff;
    display: flex;
    .box {
      width: 300px;
      height: 200px;
      background: #000;
      position: fixed;
      left: 50%;
      top: 50%;
      margin-left: -150px;
      margin-top: -100px;
      z-index: 999;
    }
  }
}

在调整后的代码中，我们对.container添加了position: relative;，确保其成为一个定位上下文。然后，我们将.cover的z-index调整为99，.case的z-index保持为100，而.box的z-index设置为999。这样，.box将显示在.cover之上，而.case将被.cover遮罩。

通过这些调整，我们成功地实现了所需的层叠顺序效果。