z-index不工作与固定定位 [英] z-index not working with fixed positioning
问题描述
我有一个默认定位的 div （即 position：static ）和
I have a div with default positioning (i.e. position:static) and a div with a fixed position.
如果我设置了z-index的元素，似乎不可能使固定元素落在静态元素之后。
If I set the z-indexes of the elements, it seems impossible to make the fixed element go behind the static element.
#over {
width: 600px;
z-index: 10;
}
#under {
position: fixed;
top: 5px;
width: 420px;
left: 20px;
border: 1px solid;
height: 10%;
background: #fff;
z-index: 1;
}
<!DOCTYPE html>
<html>
<body>
<div id="over">
Hello Hello HelloHelloHelloHelloHello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello
</div>
<div id="under">
</div>
</body>
</html>
或在jsfiddle这里： http://jsfiddle.net/mhFxf/
Or on jsfiddle here: http://jsfiddle.net/mhFxf/
我可以通过在静态元素上使用
position：absolute
来解决这个问题，但任何人都可以告诉我为什么会发生这种情况？
I can work around this by using
position:absolute
on the static element, but can anyone tell me why this is happening?
(There seems to be a similar question to this one, (Fixed Positioning breaking z-index) but it dosen't have a satisfactory answer, hence I am asking this here with my example code)
推荐答案
添加 position：relative; 到#over
#over {
width: 600px;
z-index: 10;
position: relative;
}
#under {
position: fixed;
top: 5px;
width: 420px;
left: 20px;
border: 1px solid;
height: 10%;
background: #fff;
z-index: 1;
}
<!DOCTYPE html>
<html>
<body>
<div id="over">
Hello Hello HelloHelloHelloHelloHello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello
</div>
<div id="under"></div>
</body>
</html>
这篇关于z-index不工作与固定定位的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
