CSS absolute Positioning Example

Home
Web designers handbook
Web Design Do's and Don'ts
HTML Codes
Pre-flight Check List
Web Designers Free Tools

MISCELLANEOUS

Web Design Forum

Handbook Home | Styling Tips | Misc Tips

WEB DESIGNERS HANDBOOK™

CSS absolute positioning example

Code:

 <div id="Layer1" style="position:absolute; 
    background: #999966; left:65px; 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.

You can also position any HTML element with CSS positioning as you would a Div. You can see 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.