Bug 15291 - Absolute blocks inside relative blocks placed differently if block has no border.
Summary: Absolute blocks inside relative blocks placed differently if block has no bor...
Alias: None
Product: WebKit
Classification: Unclassified
Component: CSS (show other bugs)
Version: 523.x (Safari 3)
Hardware: Macintosh OS X 10.4
: P2 Normal
Assignee: Nobody
Depends on:
Reported: 2007-09-26 18:48 PDT by Richard Connamacher
Modified: 2007-09-26 23:29 PDT (History)
1 user (show)

See Also:

Test Case (1.81 KB, text/html)
2007-09-26 18:50 PDT, Richard Connamacher
no flags Details

Note You need to log in before you can comment on or make changes to this bug.
Description Richard Connamacher 2007-09-26 18:48:32 PDT
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>

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.
Comment 1 Richard Connamacher 2007-09-26 18:50:25 PDT
Created attachment 16411 [details]
Test Case

A reduced test case illustrating the positioning bug.
Comment 2 Dave Hyatt 2007-09-26 23:29:42 PDT
This is not a bug.  This is just margin collapsing in action.