Webkit Inline Element Absolute Positioning Issue

Webkit browsers (which include Apple Safari and Google Chrome) and Konqueror make an absolutely positioned element be positioned below an inline element sometimes, as if the inline element was a block element. That happens when the absolutely positioned element is automatically positioned, has display:inline, and follows the inline element which takes up the full width (or almost the full width) of the parent element. Take a look at the following five examples. (To be clear, it's the third and fourth examples that are displayed differently in Webkit browsers.) Then we'll take a look at some solutions.

Examples

Normal Inline Element

Image Element

this is an absolutely positioned element that's positioned automatically

Full Width Image Element

this is an absolutely positioned element that's positioned automatically

Full Width Inline-Block Element

Block Element

Solutions

Some ways to get browsers to handle this more consistently are to give the sibling inline element display:block (like in the 5th example), float:left, or float:right. However, the float fix doesn't work correctly in Opera, Konqueror (tested in 3.5), and Safari 1.0 (I have access to neither 1.2 nor 1.3 currently, but it does work in Safari 2+). Alternatively, one could give the absolutely positioned element display:block, but IE5-7 won't render that differently so it's not the best for cross-browser consistency. Lastly, one could, of course, specify explicitly where the absolutely positioned element should be positioned (with the top and left properties, for instance), which often entails giving an ancestor (which could be the parent, of course) position:relative to create a new positioning context. So, to summarize, the first (shown above) and fourth/last fixes are best for cross-browser compatibility.

Floated Image Element

this is an absolutely positioned element that's positioned automatically

Block Alternative

this is an absolutely positioned element that's positioned automatically and has display:block

Explicitly Positioned

this is an absolutely positioned element that's explicitly positioned

So it's interesting that in this one area at least a few versions of each of 3 of the 4 major rendering engines have a bug. (Webkit was originally based on the KHTML engine used in Konqueror, so while not exactly the same, they often have the same CSS bugs.) And in case you're interested, here's the relevant section of the CSS2.1 specs.