ptg16476052Positioning Schemes 29111
Elements are positioned relative to their containing block. A containing block is the
block-level element that’s the ancestor of the positioned element. In the example you just
saw, the page’s
add a new style to the page’s style sheet:
#positioned { position: relative; left: 50px; }
Then I put the three paragraphs in the preceding example in a new
:
... the three paragraphs above ...
... the three paragraphs above ...
All three paragraphs will be moved 50 pixels to the right, and the offset paragraph will be
positioned relative to the
that is its containing block.
This content is inside an anonymous block.
This content is also inside an anonymous block.
In addition to containing blocks, there are also anonymous blocks. Browsers automati-
cally create anonymous blocks when a block-level element appears within a containing
block along with inline elements. Here’s an example:
This content is inside an anonymous block.
This is a paragraph.
This content is also inside an anonymous block.
FIGURE 11.2
Transparency of
overlapping ele-
ments.