HTML and CSS Reference
In-Depth Information
div {
border: 1px dotted #000;
padding: 20px;
}
#containingBlock {
position: relative;
}
#innerPositionedBox {
position: absolute;
top: 0;
left: 0;
background-color: #000;
}
[...]
<div id="containingBlock">
<div>
<div>
<divid="innerPositionedBox">
</div>
</div>
</div>
</div>
Regardless of how deeply the element
#innerPositionedBox
is
nested, the positioning for
top
and
left
is measured from the last
positioned ancestor,
#containingBlock
. If you didn't change the CSS
code for this example but altered the markup structure slightly so
that one of the middle
<div>
elements is
#containingBlock
, then the
#innerPositionedBox
element would instead use that element for its
origin (
Figure 6.4
).
