Question

我试图覆盖整个页面，除了一个透明覆盖的div。问题是我想要的顶部是fixed div的孩子。如何将其置于顶部，但将其父级置于叠加层下？

在下面的代码中，我想要在叠加层顶部的元素是.holder。这是JS Fiddle。

HTML：

<!DOCTYPE html>
<html>
  <head>
    <title>z-index tests</title>
    <link rel="stylesheet" type="text/css" href="style.css">
  </head>
  <body>
    <div class="root">
    Root
      <div class="header">
      Header
        <div class="holder">
          Holder
        </div>
      </div>
      <div class="content">
      content
        <div class="box"></div>
      </div>
    </div>
    <div class="overlay"></div>
  </body>
</html>

CSS：

.box {
  height: 100px;
  width: 100px;
  border: 1px solid #000;
}

.root {
  display: block;
  background-color: grey;
}

.header {
  background-color: red;
  position: fixed;
  top: 0px;
  width: 1600px;
}

.holder {
  background-color: green;
  height: 60px;
  width: 1600px;
  z-index: 1002;
  position: absolute;
}

.content {
  background-color: blue;
}

.overlay {
  position: fixed;
  top:0;
  bottom:0;
  left:0;
  right:0;
  background-color: rgb(50,50,50);
  opacity:0.8;
  z-index:10;
}

Answer 1

你做不到。这就是z-index和堆叠层的工作方式。在.holder后代.header通过position: fixed创建自己的堆叠上下文之前，将.holder推到叠加层上方的唯一方法是将其移到.header之外的DOM树中1}}并使其成为.overlay的兄弟或后代。

第二个选项（但我猜.header没有理由不固定）是将.header的样式更改为不创建堆叠上下文，例如。将其位置更改为absolute并删除z-index。在这种情况下，.holder的堆叠上下文将与.overlay处于同等级别，您可以使用z-index来操纵那些深度。

查看list of CSS properties创建新的堆叠上下文。

我知道我让你无法安慰。

Answer 2

你可以通过在.holder添加一个巨大的盒子阴影来欺骗并达到同样的效果：

.box {
  height: 100px;
  width: 100px;
  border: 1px solid #000;
}

.root {
  display: block;
  background-color: grey;
}

.header {
  background-color: red;
  position: fixed;
  top: 0px;
  width: 1600px;
  /*z-index: 1;*/
}

.holder {
  background-color: green;
  height: 60px;
  width: 1600px;
  z-index: 1002;
  position: absolute;
}

.content {
  background-color: blue;
}

.highlight {
  box-shadow:0 0 0 9999999px rgba(50,50,50,0.8);
}

  <div class="root">
    Root
    <div class="header">
      Header
      <div class="holder highlight">
        Holder
      </div>
    </div>
    <div class="content">
      content
      <div class="box"></div>
    </div>
  </div>

JS Fiddle

在内部div上应用z-index以显示在叠加层的顶部

2 个答案: