Example of Absolute Positioning

This paragraph is 200 pixels across and 100 pixels down from the upper left-hand corner of the window.

This paragraph is 300 pixels across and 150 pixels down from the upper left-hand corner of the window.

This paragraph is 200 pixels across and 350 pixels down from the upper left-hand corner of the window.

This paragraph is 300 pixels across and 400 pixels down from the upper left-hand corner of the window.

Two of the clear weaknesses of CSS Level 1 were the lack of control over positioning and depth-indexing: in Level 1 it is very difficult to control the absolute or relative placement of elements on the display, or to control which elements should appear on top of (or below) another. The latter issue is important for deciding if a "floated" element should appear "on top" or "below" another element, while both issues are critically important for dynamic HTML pages containing graphical interface components that depend on their positions to define their meaning. For example, a dynamic HTML document may contain twelve different HTML segments, representing twelve different options on the same product to be purchased. A designer may then want all twelve of these segments to appear at the same place on the page, with the user able to dynamically "reveal" one of the items while hiding the rest. This requires a dynamic ability to position the elements one on top of another (so that they appear at the same place), and the ability to change the order in which they appear,