This paragraph contains an 'img' with a class of 'cl1' (
) that should appear in the top left corner of the containing block, and have an intrinsic height (15 pixels).
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 20px;}
div.contain img {position: absolute; left: 0; width: 15px;}
.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: 25%;height: 25%;}
This paragraph contains an 'img' with a class of 'cl1' () that should appear in the top left corner of the containing block, and have an intrinsic height (15 pixels).
This paragraph contains an 'img' with a class of '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 'img' had not been positioned, and have an intrinsic height (15 pixels).
This paragraph contains an 'img' with a class of '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 an 'img' with a class of '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 an 'img' with a class of '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 an 'img' with a class of 'cl6' () that should appear in the top left corner of the containing block, and have an intrinsic height (15 pixels).
This paragraph contains an 'img' with a class of 'cl7' () that should appear near the top left corner of the containing block, with its top edge inset 10 pixels from the top edge of the containing block, and have an intrinsic height (15 pixels).
This paragraph contains an 'img' with a class of 'cl8' () that should appear near the top left corner of the containing block, with its top edge inset 10 pixels from the top edge of the containing block, and have an intrinsic height (15 pixels).
This paragraph contains an 'img' with a class of '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.