我希望元素(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,谁错了?是否有更好的方法可以跨浏览器完成此操作?
答案 0 :(得分:0)
试试这个,
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(如果可能的话)。
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;
答案 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>