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

时间:2015-07-14 19:34:15

标签: html css google-chrome webkit z-index

我希望元素(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,谁错了?是否有更好的方法可以跨浏览器完成此操作?

3 个答案:

答案 0 :(得分:0)

试试这个,

&#13;
&#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;
&#13;
&#13;

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

&#13;
&#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;
&#13;
&#13;

答案 1 :(得分:0)

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

您必须使用解决方法。

答案 2 :(得分:0)

如果您需要“定位”标题,可以将其包装在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>