Geek Answers Handbook

Why are nested divs with position: an absolute render with a rigid interpretation of shrinkage in line?

If there are two absolutely positioned divs on the page, the innermost of which has content that should be displayed as a table, Firefox 3.6.x and 4.x, Chrome 13.x and Opera 11.x - all this refers to the fragmentation of 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 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 Result ([C] means color block C):

[B] Banana Fritter
[R] Cherry Pie

Will produce output:

Banana
fritters
Cherry
Pie

Divas with clearly stylized 15px widths were excluded from the view, and unnecessary line breaks were applied in any text context.

If any of the external sections has its position changed to "relative", the content layout is restored to the expected layout.

Why is the use of two nested, absolutely positioned divs provoking a browser layout mechanism for rendering child divs with styling enabled, ignored, and the content forced as little space as possible?

** UPDATE **

The simplest example that avoids table complications ( 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 Result:

Banana fritter

Displayed output:

Banana
Fritters

+7
source share
2 answers

Element with position: absolute is derived from the normal page flow and positioned in the desired coordinates relative to its containing block.

Since an absolutely positioned element is taken out of the normal flow, the normal document flow behaves as if this element does not exist: it closes the space that is required.

a source

You will not get a green background because `; “empty”: only the child is in the absolute meaning “no”.

Words are deformed because your table is placed in an element without a space (the table takes up space, which can take up by default). It's like forcing " width:0% ". You will not get either blue or red for the same reason.

The following will produce a similar conclusion:

 <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 interesting question :)

+1
source

I do not know the exact science behind this, but I accept this as a general rule. This is probably deep in some part of the W3C spec.

Table

First, your items collapse because they have no content . Take my JSFiddle:

http://jsfiddle.net/qu4P8/

Just adding &nbsp; in an empty div, select background-colours . As a rule, the columns in the table are the same width as the widest cell of the table, so it can explain why you do not see any content. Even setting the width will not mean rendering the cell. No content. This is a key element here.

Double Absolute

I'm not sure why the content is crashing, but for some reason it makes sense. The double absolute div seems to lose its width. The parent div does not have a specific width, so the inner div also loses the width. However, I cannot think of a case where this markup style would be useful.

For example, they are both absolutely positioned, so you can separate them like something below:

 <div style="position:absolute">Content 1</div> <div style="position:absolute">Content 2</div>

I do not see the need for you to suggest what could not have been done otherwise. Everything is fine here.

0
source

More articles:


All Articles