Web Designers Killer Handbook™

An example of CSS absolute positioning

Code:

<div id="Layer1" style="position:absolute; background: #999966; left:13px; top:206px; width:380px; height:27px; z-index:1"> Absolute postioning</div>

The above code snippet demonstrates how we can position a div using CSS to any position on the page right down to the pixel! This type of control was not possible before CSS.

NEW WEB DESIGN VIDEO: Learn web design with HTML and CSS

You can also position any HTML element with CSS positioning just as you would a div tag.

You can see in the example below how I positioned a paragraph (<p></p>) in the same way.

Code:

<p style="position:absolute; background: #C5C5C5; left:275px; top:425px; width:390px; height:27px; z-index:1"> A paragraph positioned with CSS. </p>

Absolute postioning of a div to a random spot on the page.

A paragraph positioned with CSS.