CSS2 Test Suite: 9.8.4 Absolute Positioning

The style declarations contained within this page:

P.start {line-height: 24px; font-size: 12px; width: 400px;
     color: black; background: white; position: relative;}
#outer1 {color: purple; border: 1px solid purple; position: absolute; top: 100px; left: 100px; width: 200px;}
#inner1 {color: blue; border: 1px solid blue;}
#outer2 {color: purple; border: 1px solid purple; position: relative;}
#inner2 {color: blue; border: 1px solid blue; position: absolute; top: 100px; left: -100px; width: 200px;}

P.barnote {position: relative; margin-right: 2em; left: 2em; width: 50%;}
SPAN.mark {position: absolute; top: auto; left: -2em; color: maroon;}

DIV {position: relative; background: yellow; height: 50px; width: 250px; margin: 10px;}
IMG.cl1 {position: absolute; top: 30%;}
IMG.cl2 {position: absolute; right: 30%;}
IMG.cl3 {position: absolute; bottom: 30%;}
IMG.cl4 {position: absolute; left: 30%;}
IMG.cl5 {position: absolute; top: 0; left: 0;}
IMG.cl6 {position: absolute; top: 0; right: 100%;}
IMG.cl7 {position: absolute; bottom: 100%; left: 0;}
IMG.cl8 {position: absolute; bottom: 100%; right: 100%;}

[start] The beginning of the paragraph contents. [outer1] The beginning of the outer SPAN. [inner1] The contents of the inner SPAN. [outer] The end of the outer SPAN. The end of the paragraph contents.

[start] The beginning of the paragraph contents. [outer2] The beginning of the outer SPAN. [inner2] The contents of the inner SPAN. [outer] The end of the outer SPAN. The end of the paragraph contents.

[barnote] This paragraph contains an SPAN element (with a class of 'mark') which will cause the SPANned text to be "floated" to the beginning of the line in which it occurs. In other words, a pair of red dashes will appear at the beginning of the line containing THIS -- word.

The following DIVs have been engineered to create a context for positioning. The class of each test is noted at the beginning of the DIV. The percentage offsets should be calculated with respect to the width (250px) or height (50px) of the containing block, depending on the property being tested.

[cl1]

[cl2]

[cl3]

[cl4]

The following four images have been absolutely positioned without a containing element, and so are positioned with respect to the BODY element, which is their parent element. The images should be scrolled with the document, should any scrolling occur.