The style declarations contained within this page:
div.contain {position: relative; width: auto; height: 100px;
border: 2px dashed gray; color: gray; margin-bottom: 0.5em;}
div.contain * {color: black;}
div.contain p {margin: 0.5em 0 0.5em 3em;}
div.contain span {position: absolute; left: 0; background: #FDA;}
.cl1 {top: 0;}
.cl2 {top: auto;}
.cl3 {top: 25%; bottom: 25%; height: 50%;}
.cl4 {top: 25%; bottom: 25%; margin-top: auto; margin-bottom: auto; height: 25%;}
.cl5 {top: 0; bottom: 0; margin-top: 25px; margin-bottom: auto; height: 25%;}
.cl6 {top: 0; bottom: 0;}
.cl7 {top: 10px; bottom: 10px;}
.cl8 {top: 10px; bottom: -10px;}
.cl9 {top: 25%; bottom: 25%; margin-top: 25px; margin-bottom: 25px; height: 25%;}
This paragraph contains a 'span' with a class of 'cl1' ([cl1]) that should appear in the top left corner of the containing block.
This paragraph contains a 'span' with a class of 'cl2' ([cl2]) that should appear at the left edge of the containing block with its top edge aligned with the position it would have been if the 'span' had not been positioned.
This paragraph contains a 'span' with a class of 'cl3' ([cl3]) that should appear at the left edge of the containing block with a height half that of the containing block, and centered vertically within the containing block.
This paragraph contains a 'span' with a class of 'cl4' ([cl4]) that should appear at the left edge of the containing block with a height one-quarter that of the containing block, and centered vertically within the containing block.
This paragraph contains a 'span' with a class of 'cl5' ([cl5]) that should appear at the left edge of the containing block with a height one-quarter that of the containing block, and with its bottom edge lined up with the vertical midpoint of the containing block.
This paragraph contains a 'span' with a class of 'cl6' ([cl6]) that should appear at the left edge of the containing block with a height equal to that of the containing block, centered within it.
This paragraph contains a 'span' with a class of 'cl7' ([cl7]) that should appear at the left edge of the containing block with a height 20 pixels less than that of the containing block, and with its top and bottom edges inset 10 pixels from each edge of the containing block.
This paragraph contains a 'span' with a class of 'cl8' ([cl8]) that should appear at the left edge of the containing block with a height equal to that of the containing block, but shifted 10 pixels to downward.
This paragraph contains a 'span' with a class of 'cl9' ([cl9]) that should appear at the left edge of the containing block with a height one-quarter that of the containing block, its top edge lined up with the vertical midpoint of the containing block, and its bottom edge 25% inset from the bottom edge of the containing block.