使用Chrome中的"z-index"在其固定父级下的元素

Question

我希望element(div)在其固定的parent(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>

看来我误解了你的问题。无论如何，答案是 chrome 是正确的。我认为更好的解决方案是使用相同级别的两个 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>