Inconsistent position:relative behaviour

When trying to realize given designs with CSS techniques I often run into a strange problem which I consider most annoying; actually I thought it was a bug, but current versions of Firefox, IE, Chrome and Opera all behave the same:

If a container element with position:relative contains a child element with position:static and a margin, and some other children with position:absolute, then the reference point for the positioning moves vertically (but not horizontally) with the margin of the static element. Furthermore, the background of the container is vertically cropped to the margin of the child element. Strange enough: this issue disappears, when adding a border to the container element!

Please view the test case I made:
http://www.markusernst.ch/stuff_for_the_world/css-position-test.html

Is this a bug? Then I'd suggest to discuss a way how to get rid of it without breaking legacy content that might rely on it.

Or is there some sensible reason for this behavior? Then I'd suggest to add a possibility to allow margins for children of elements with position:relative without affecting the positioning reference and background of the container.
-- 
Schon gehört? GMX hat einen genialen Phishing-Filter in die
Toolbar eingebaut! http://www.gmx.net/de/go/toolbar

Received on Saturday, 12 February 2011 14:17:37 UTC