Positioning

Traditionally, the most convoluted uses of HTML have involved the use of frames and tables to create page layouts. CSS, through its positioning capabilities, offers simpler and more powerful methods.

The simplest application of CSS positioning is to place something in a set position on a Web page. For example, many of the UT Austin Web pages have a logo in the upper left corner. This example below positions a logo in the upper left corner:

this HTML markup	renders like this
<span class="logo"><img src="zippy.gif" alt="zippy" /></span> <p></p><p></p> <h3>A small positioning example</h3> The logo in the upper left corner is positioned using absolute positioning. The <H3> tag has a left padding of 70px. This is wider than the 60px x 60px graphic. The bottom padding is 40px. It doesn't have to be as large, because H3 already pads the bottom.	A small positioning example The logo in the upper left corner is positioned using absolute positioning. The <H3> tag has a left padding of 70px. This is wider than the 60px x 60px graphic. The bottom padding is 40px. It doesn't have to be as large, because H3 already pads the bottom.

The two most important aspects of this example are the type of positioning used (absolute), and the coordinates at which the logo is positioned (0,0).

The type of positioning is given by position: absolute;. Absolute positioning simply places the element at the location specified without affecting the layout of the rest of the page. The positioning rule top: 0px; positions the top of the element the given distance, in this case zero pixels, from the top of its container. The left: 0px; rule similarly positions the left edge of the element the given distance, once again zero pixels, from the right edge of its container.

The top attribute gives the distance from the top of the HTML element to the top edge of the container. The left attribute gives the distance from the left edge of the HTML element to the right edge of the container.

Another common positioning technique is relative positioning. As the name implies, a relatively positioned HTML element is positioned relative to where it would be placed if it were not positioned. An additional difference between relative and absolute positioning is that with relative positioning, the page is laid out as if the positioned element were in its normal place. This makes relative positioning ideal for nudging an image or table into exactly the right position.

One of the more subtle aspects of relative positioning is that it redefines the coordinate system used for absolutely positioned elements contained within a relatively positioned one. An image positioned absolutely within a relatively positioned paragraph will be positioned in a coordinate system with its origin at the upper left corner of the paragraph.

Relatively positioning an HTML element such as a paragraph or a div defines a new coordinate system for absolutely positioned elements it contains.

We will use this in the next example, where we apply the style rule position:relative to a div. At first glance, one might ask what this does. Since we don't set any values for the top, bottom, left or right we don't change the position of the div. However, because the div is relatively positioned, it establishes a new coordinate system for elements that are absolutely positioned within it. The <span class="underlay">...</span> tag applies a style rule to the T that changes its color, increases its size, and absolutely positions it just above (top: -5px;) the top left corner of the div.

We also set z-index: 0; for the T. CSS does not offer any sort of true three-dimensional positioning, but it does allow HTML elements to be layered on top of one another. The order of these layers, from back to front is given by the z-index. In this example, the text is given a z-index of 1 so that it will always be drawn on top of the T, which has a z-index of 0.