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

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

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