HTML and CSS Reference
In-Depth Information
Figure 6.4
The position of the black
#innerPositionedBox
updated with a new containing block.
<div>
<div id="containingBlock">
<div>
<divid="innerPositionedBox">
</div>
</div>
</div>
</div>
Since you cannot escape this behavior and position an element with
respect to the root element once it has a different containing block
defined, it is important not to overuse positioning properties, thus need-
lessly creating new containing blocks. Sometimes this is inescapable, and
in those cases math can be your friend (either with paper and pencil or
in code via JavaScript)—you can calculate the position of the containing
block (and any of its containing blocks) and work your way back up to the
root element.
