CSS z-index问题：如何让.box在.cover之上显示，但.case被.cover遮罩？

要让.box在.cover之上显示，但.case被.cover遮罩，可以通过调整它们的CSS样式和定位来实现。以下是具体的步骤和代码示例：

1. 设置定位：确保.cover、.case和.box都设置为定位元素（例如使用position: fixed或position: absolute），因为z-index属性只对定位元素有效。
2. 调整z-index值：通过设置不同的z-index值来控制元素的层叠顺序。具有较高z-index值的元素将显示在具有较低z-index值的元素之上。

• 给.cover设置一个较低的z-index值，例如z-index: 999;。
• 给.case设置一个比.cover略高的z-index值，例如z-index: 1000;。这样可以确保.case部分显示在.cover之上。
• 给.box设置一个更高的z-index值，例如z-index: 99999;。这样可以使.box显示在.case和.cover之上。

3. 示例代码：

<style>
  .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: 999; /* 较低的z-index */
  }
  .case {
    position: fixed;
    z-index: 1000; /* 比.cover的z-index高 */
    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; /* 更高的z-index */
  }
</style>

总的来说，通过以上方法，可以实现.box在.cover之上显示，而.case则被.cover遮罩的效果。