The following styles herein are applied:
body, html {margin: 0; padding: 0; border: none; }
.two { position: static; }
.three { position: static; left: 100px; top: 50px; }
.four { left: 100px; top: 50px; }
.foura { position: relative; top: 200px; left: 200px; position: static; } /* check proper CSS parsing */
.five { position: relative; left: 50px; }
.six { position: absolute;
right: 50px; top: 400px; width: 200px; height: 300px;
background-color: yellow; font-size: 16px; left: 0; margin-left: auto; }
.seven { position: fixed;
right: 200px; top: 100px; width: 200px; height: 300px;
background-color: #99F; font-size: 16px; left: 0; margin-left: auto; }
.eight { position: absolute;
right: 250px; top: 50px; width: 200px; height: 300px;
background-color: #F99; font-size: 16px; left: 0; margin-left: auto; }
.nine { position: fixed;
border: thin solid red; margin-top: auto;
right: 30%; bottom: 5%; width: 200px; height: 20%;
background: transparent none; font-size: 16px; left: 0; margin-left: auto; }
This should be a paragraph normally positioned in the normal flow.
This should be a paragraph normally positioned in the normal flow.
This should be a paragraph normally positioned in the normal flow.
This should be a paragraph normally positioned in the normal flow.
This should be a paragraph normally positioned in the normal flow.
This paragraph should be displaced 50px to the right from its normal position.
This paragraph (six) should have its upper right corner 50px from the right edge of the body and 400px from the top of the body of the document. It should scroll with the document. It should be 200px wide and 300px tall.
This paragraph (seven) should have its upper right corner 200px from the right edge of the body and 100px from the top of the body of the document. It should not scroll with the document. It should be 200px wide and 300px tall.
This span (eight) should have its upper right corner 250px from the right edge of the body and 50px from the top of the body of the document. It should scroll with the document. It should be 200px wide and 300px tall.
This is an element (nine) with position fixed and a transparent background. You should be able to see other text behind this text. Its bottom should be 5% of the viewport above the bottom of the viewport, and its right edge should be 30% of the viewport to the left of the right edge. It should have a thin solid red border.
(Back to CSS Testing Information, David Baron)