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.
width= 130 px
3
Inner
4
contents.
5
Sibling contents. End of outer
6
contents. End of body contents.
7
8
(400, 0) (400, 400)
9.8.4 Absolute positioning
Finally, we consider the effect of absolute positioning [p. 113] . Consider the
following CSS declarations for outer and inner:
#outer {
position: absolute;
top: 200px; left: 200px;
width: 200px;
color: red;
}
#inner { color: blue }
which cause the top of the outer box to be positioned with respect to its
containing block. The containing block for a positioned box is established by the
nearest positioned ancestor (or, if none exists, the initial containing block [p. 96] ,
as in our example). The top side of the outer box is ’200px’ below the top of the
containing block and the left side is ’200px’ from the left side. The child box of
outer is flowed normally with respect to its parent.
121