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

试试这个，

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

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%;
}

＆＃13;

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

＆＃13;

Answer 2

当元素有位置时：创建一个新的上下文，这意味着div 相对于window上下文。因此，对于header，您的div不能被z-index放置。

您必须使用解决方法。

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的{{3}}。

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>

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

3 个答案: