Bug 15291 – Absolute blocks inside relative blocks placed differently if block has no border.

• Component: CSS
• Status: RESOLVED INVALID

[Richard Connamacher]

In WebKit (and Gecko), relatively positioned blocks are not treated as normal blocks unless they have a border. Without a border, they shrink to the size of their normal flow content.

This causes problems with both absolutely positioned content inside the relative block and with where to draw the block's background.

Absolutely positioned blocks inside relatively positioned blocks are currently being placed relative to the enclosing block if the outer block has a border and relative to the outer block's first child in normal flow if it has no border.

Also, the outer block's background only covers an area the size of the block's inline content if there is no border; if there is a border, it fills the entire original block.

For example, in the following simplified code:

<div id="outer" style="position: relative">
	<div id="absolute" style="position: absolute; left: 0; top: 0;"></div>
	<div id="static" style="margin-top: 20px;"></div>
</div>

WebKit positions the absolute block at the top left of the static block's content, which is 20 pixels lower than it should. This can cause the absolute block to be rendered right on top of the static block's content, rather than above it as intended.

Adding a border to the outer block causes the absolute block to move up 20 pixels to its intended position.

Gecko renders this identically to WebKit. IE, however, positions all blocks the same regardless of whether they have borders or not.

[Richard Connamacher]

Created attachment 16411 [details]
Test Case

A reduced test case illustrating the positioning bug.

[Dave Hyatt]

This is not a bug.  This is just margin collapsing in action.