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

Document Window
(0,0) (0, 400)
24 px
1
2
Beginning of body contents. End of
body contents.
3
4
5
6
7
8
(200, 200)
Start of outer
contents. Inner
contents. End of
outer contents.
(400, 0) (400, 400)
The following example shows an absolutely positioned box that is a child of a
relatively positioned box. Although the parent outer box is not actually offset,
setting its ’position’ property to ’relative’ means that its box may serve as the
containing block for positioned descendants. Since the outer box is an inline box
that is split across several lines, the first inline box’s top and left edges (depicted
by thick dashed lines in the illustration below) serve as references for ’top’ and
’left’ offsets.
#outer {
position: relative;
color: red
}
#inner {
position: absolute;
top: 200px; left: -100px;
height: 130px; width: 130px;
color: blue;
}
This results in something like the following:
122