Battle of the CSS positions
It all began a couple days ago, one slightly dull Tuesday afternoon. The air was thick and the light was dimmed. Ahem, I have a challenge for you; try and place a div underneath another. “Piece of cake,” you say. “That’s hardly a challenge”. Well, not so it would seem. I was perplexed by what I saw for a few minutes, at least. So much that I wrote this article and created a little demonstration.
The problem comes when you float a div and then try and place a div positioned absolutely behind it. Try to visualise that in your head for a moment. You obviously just give the floated div a higher z-index. Problem solved. Case closed. But you’d be wrong, so very wrong. Cue Test 2.
It seems that when you specify an element with a position (albeit absolute or relative) it automatically places it before other non-positioned elements. I’m not sure why and I have yet to explore the mighty Google or W3C on the matter, but I’m positive there will be a logical explanation (would someone care to enlighten me, perhaps?).
One way to solve the riddle is to set the floated element’s position to relative to, again, place it higher in the viewing ranking and then add that lovely higher z-index. This then corrects it in all good browsers (Firefox, Safari and Opera). I assume the behaviour is the same in IE, but I haven’t checked. You can see this working in test 3.
Breaking news just in: I couldn’t find the explanation on the W3C site under visual formatting model.
1 Paul wrote
30th October, 2008
That is quite strange. Also, in Internet Explorer, one must apply the z-index also to the parent of the element, and the parent of that element until you reach the same scope as the one you are trying to get above.