z-index not working with fixed positioning
I have a div with default positioning (i.e. position:static) and a div with a fixed position.
If I set the z-indexes of the elements, it seems impossible to make the fixed element go behind the static element.
Or on jsfiddle here: http://jsfiddle.net/mhFxf/
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 doesn't have a satisfactory answer, hence I am asking this here with my example code)
Answer
Add position: relative; to #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>