如何通过CSS调整层叠顺序，使.box显示在.cover之上而.case被遮罩？-css教程-PHP中文网

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

碧海醫心

发布： 2025-04-23 22:04:16

原创

1173人浏览过

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

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

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

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

<code><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;
    }
  }
}</code>

登录后复制

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

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

码上飞

码上飞（CodeFlying）是一款AI自动化开发平台，通过自然语言描述即可自动生成完整应用程序。

138

查看详情

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

<code><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;
    }
  }
}</code>

登录后复制

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

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

以上就是如何通过CSS调整层叠顺序，使.box显示在.cover之上而.case被遮罩？的详细内容，更多请关注php中文网其它相关文章！