W3C CSS2 Cascading Style Sheets, level 2 - instructional media + ...

Document Window
(0,0) (0, 400)
24 px
1
2
@
Beginning of body contents. Start
of outer contents. End of outer
3
contents. End of body contents.
4
5
6
(@+200, @−100)
Inner
Contents.
7
8
= 130 px
(400, 0) (400, 400)
If we do not position the outer box:
#outer { color: red }
#inner {
position: absolute;
top: 200px; left: -100px;
height: 130px; width: 130px;
color: blue;
}
the containing block for inner becomes the initial containing block [p. 96] (in our
example). The following illustration shows where the inner box would end up in
this case.
123