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

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

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

<template></template>


.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代码：

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

<template></template>


.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遮罩。

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