在 Chrome 中使用“z-index”的固定父元素下的元素

Question

我想要一个元素 (div) 在其固定父级 (header) 下分层：

header {
  position: fixed;
  width: 100%;
  height: 100px;
  
  background-color: #ccc;
}
header > div {
  position: absolute;
  height: 100%;
  width: 100px;
  z-index: -1;
  
  transform: translateY(50%);
  background-color: #aaa;
}

<header>
  <div>
  </div>
</header>

这适用于 Firefox，但不适用于 Chrome。要修复它，您需要这样做：

header {
  position: fixed;
  width: 100%;
  height: 100px;
}
header > div {
  position: relative;
  width: 100%;
  height: 100%;
  
  background-color: #ccc;
}
header > div > div {
  position: absolute;
  height: 100%;
  width: 100px;
  z-index: -1;

  transform: translateY(50%);
  background-color: #aaa;
}

<header>
  <div>
    <div>
    </div>
  </div>
</header>

但这很糟糕！ 根据 Firefox 或 Chrome 的规范，谁错了？有没有更好的方法来跨浏览器完成这项工作？

Answer 1

试试这个，

header {
  position: fixed;
  width: 100%;
  height: 100px;
  background-color: #ccc;
  overflow: hidden;
}
header > div {
  height: 100%;
  z-index: -1;
  transform: translateY(50%);
  background-color: #aaa;
  overflow: hidden;
}

<header>
   <div></div>
</header>

好像我误解了你的问题。无论如何，答案是铬是正确的。我认为更好的解决方案是使用相同的二级 DIV（如果可能）。

header {
  position: fixed;
  width: 100%;
  overflow: hidden;
  
}
header .header-inner {
  position: relative;
  height: 100px;
  width: 100%;
  z-index: 1;
  background-color: #ccc;
}

header .under-layer {
  position: absolute;
  height: 100%;
  z-index: -1;
  transform: translateY(50%);
  background-color: #aaa;
  overflow: hidden;
  top: 0px;
  width: 100%;
}

<header>
  <div class="header-inner"></div>
  <div class="under-layer"></div>
</header>

Answer 2

当一个元素有位置时：一个新的上下文被创建，这意味着div 相对于window 上下文。所以你的 div 不能被 z-indexly 放置在 header 上。

您必须为此使用解决方法。

Answer 3

如果您需要“定位”您的标题，您可以将其包装在一个 div 中：

<div class="test">
<header>
  <div>
  </div>
</header>
</div>

改为将position: fixed; 应用于此 div。这将为 div 创建一个stacking context。

.test {
  position: fixed;
  width: 100%;
  height: 100px;
}

然后您可以将z-index: -1; 应用到header > div，因为它将与其父级（标题）共享div.test 的stacking context。

header {
  width: 100%;
  height: 100%;
  background-color: #ccc;
}

header > div {
  position: absolute;
  height: 100%;
  width: 100px;
  z-index: -1;

  transform: translateY(50%);
  background-color: #aaa;
}

.test {
  position: fixed;
  width: 100%;
  height: 100px;
}

header {
  width: 100%;
  height: 100%;
  background-color: #ccc;
}

header>div {
  position: absolute;
  height: 100%;
  width: 100px;
  z-index: -1;
  transform: translateY(50%);
  background-color: #aaa;
}

<div class="test">
  <header>
    <div>
    </div>
  </header>
</div>