Why do nested divs with position: absolute render with a harsh interpretation of shrink-to-fit?
If there are two absolutely positioned divs on a page, the innermost of which has content that should be rendered as a table, Firefox 3.6.x & 4.x, Chrome 13.x and Opera 11.x all resort to crushing the content.
Test case:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Nested Absolutes</title>
</head>
<body>
<div style=" position: absolute; background-color: green;">
<div style="position: absolute;">
<div style="display: table;">
<div style="display: table-column; width: 15px;"></div>
<div开发者_如何学Go style="display: table-column;"></div>
<div style="display: table-row;">
<div style="display: table-cell; background-color: blue;"></div>
<div style="display: table-cell;">
Banana Fritter
</div>
</div>
<div style="display: table-row;">
<div style="display: table-cell; background-color: red;"></div>
<div style="display: table-cell;">
Cherry Pie
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Expected output ([C] to mean a block of colour C):
[B]Banana Fritter
[R]Cherry PieWill produce rendered output:
Banana
Fritter Cherry PieThe divs with an explicitly styled width of 15px have been eliminated from view and any text context has had line breaks unnecessarily applied.
If either of the outer divs has its position changed to "relative", the layout of the content is restored to the expected layout.
Why does the use of two nested, absolutely positioned divs provoke a browser's layout engine into rendering the child divs with supplied styling ignored and the content forced into as small a space as possible?
** UPDATE **
A simpler example that avoids the complications of tables (fiddle):
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Nested Absolutes</title>
</head>
<body>
<div style=" position: absolute; background-color: green;">
<div style="position: absolute;">
<div>
Banana Fritter
</div>
</div>
</div>
</body>
</html>
Expected output:
Banana Fritter
Rendered output:
Banana
FritterAn element with position: absolute is taken out of the normal flow of the page and positioned at the desired coordinates relative to its containing block.
Since the absolutely positioned element is taken out of the normal flow, the normal document flow behaves as if the element is not there: it closes up the space it would take.
source
You'll get no green background because `; is "empty" : is only child is in absolute aka "not there".
The words are warped because your table is positioned in an element with no space (a table take the space it can take by default). It's like forcing a "width:0%". You won't get any blue nor red for the same reason.
The following will produce similar output :
<div style="width:0px; height:0px">
<div style="display: table;">
<div style="display: table-row;">
<div style="display: table-cell; background-color: blue;"></div>
<div style="display: table-cell;">
Banana Fritter
</div>
</div>
<div style="display: table-row;">
<div style="display: table-cell; background-color: red;"></div>
<div style="display: table-cell;">
Cherry Pie
</div>
</div>
</div>
</div>
Thanks for the interresting question :)
I don't know the exact science behind this, but I take it as a general rule. It's probably deep within some part of the W3C spec
The Table
For starters, your elements collapse because they have no content. Take my JSFiddle:
http://jsfiddle.net/qu4P8/
Simply adding a to the empty div's shows the background-colours of choice. Typically, columns on a table are only as wide as the widest table-cell, so it may explain why you don't see any content. Even setting a width will not mean these cell's render. There is no content. This is the key element here.
Double Absolute
I'm not sure why the content collapses, but it kind of makes sense why. The double absolute div seems to lose it's width. The parent div does not have a defined width, so the inner div seems to lose width too. However, I can't think of a case where this style of mark-up would be beneficial.
For instance, they are both absolutely positioned, so you could seperate them out, like something below:
<div style="position:absolute">Content 1</div>
<div style="position:absolute">Content 2</div>
I see no need for the case you have suggested, that could not be accomplished another way. Everything seems OK here.
加载中,请稍侯......
精彩评论