Menu
I have a simple absolute div and another normal div coming behind. Why is the absolute div rendered above the other?
I know that I can fix it with z-index - But what is the reason?
JSBIN: http://jsbin.com/yadoxiwuho/1
<style>
.with-absolute {
position:absolute;
top:0px;
bottom:0px;
background-color:red
}
.other {
background-color:yellow;
}
</style>
</head>
<body>
<div class="with-absolute">Hello</div>
<div class="other">Why is this not on top? It comes last</div>
</body>
730
The paint order of elements is determined by CSS 2.1 spec, E.2 Painting order
Static positioned elements are painted in steps 4 to 7. Absolute positioned elements with a z-index of auto or 0 are painted in step 8, so are always on top.
88
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
