One of the bigger problems of HTML is controlling the layout of an HTML page. Wrestling with tables and frames is limiting and difficult considering the fact that different browsers will render items differently. The ability to accurately position layers is a great new feature on the horizon.
You can define a rectangular layer in your web page, place it precisely where you want it, and even overlap multiple layers.
Let's start by taking a look at the position attribute:
<HTML>
<HEAD>
<STYLE type="text/css">
<!--
#coolness { position:absolute; top:100px; left:100px; width:100px }
-->
</STYLE>
</HEAD>
<BODY>
This is an example of <B id="coolness">something in a box</B>
that got yanked out.
</BODY>
</HTML>
See this example.
The position:absolute tells the renderer to place this item with respect to the entire window. The top left corner is defined to be 100 pixels from the top and left side. The width of the layer (or box) is also 100 pixels as defined by the width.
The position attribute can also be relative. Relative places the item relative to the current position (in contrast with respect to the upper left corner of the window).
The third parameter that position can be is static. Static is the default behaviour of an HTML page. The converse to position:static is the float command. Here is an example:
#zoom { float:right; width:100px; height:100px}
This defines a floating square that is 100x100 pixels large. This square
is placed at the current position going down and to the right. Other values
for float is left and none.
You can easily overlay multiple layers just by defining their positions on top of one another. The default behaviour is to start on the bottom and add layers on top. If you wish to explicity state the order in which they are drawn, you can use the z-index property. This property is an integer starting from 1 (the lowest layer) and increasing to higher layers.