whilst helping a member in another forum to be aware of the natural stacking
order of elements with the implementation of negative margins I discovered,
what appears to me to be, an oddity.
I am, of course, aware that using the float attribute will achieve the “correct result”.
Funnily enough, IE6 keeps the border above.
Adding position:relative to the images also achieves the “correct result”.
A logical explanation for the behaviour of the code that I have used though is still required.
As a matter of interest it does work as expected with a block element…
It just has to do with the <img> element and the fact it is a replaced inline element (probably).
I don’t have an explanation that really makes sense in my head. I just think it’s the tags that are the issue. Display:block makes elements almost exactly like other block elements (aka <div>) so this is just probably the element itself that is the problem
Even though the images were given block displays the <img> tag along with doctype rendering excludes the image from normal block stacking behavior.
Inline elements in their natural environment can’t take on vertical margins so I would assume that is playing a role in the way the borders are behaving.
You will find an explanation of the stacking level order in the Stacking Context Description (implemented in good browsers).
Starting with the canvas as the lowest, text and inline replacements comes high in the stacking order; at 7.2.1.4.1 and apart from outlines only positioned element’s auto level becomes higher. Block’s stacking level comes at 4 and their borders comes at 4.3 layered in the block’s source order.
So your block displayed images gets their borders atttaced to the block box, but the image tag’s content is displayed as the replaced inline content it is. (Note that if the image is missing the alt-text is the inline content.)
Stacking order test example; block boxes vs text and inline box:
As I always point out that when you use negative margins and expect overlap/underlap then simply add position:relative also. (IE will quite often drag block content under the background also so it’s a win win method )