This is an old post from 2008. As such, it might not be relevant anymore.
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.
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.
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.
Breaking news just in: I couldn’t find the explanation on the W3C site under visual formatting model.