Web Development Network  |  Sites:    Capital Tutorials    Internet Marketing Books    Arcade Games
Depiction- Webmaster Resources
Stock Image


Contributors: SSD VPS in Europe  |  SEO Las Vegas |  EsqRank |  Free SEO Report

Dental SEO Marketing  |  Best Las Vegas SEO Company  |  Currency Converter Live

Misc Links: Submit Tutorials (Earn $$) l Advertising l Privacy Policy | Site Map

Tutorials > CSS > Absolute Positioning

 

Position elements without effecting other elements in the normal flow of the page.


Absolute positioning allows you to set an object's placement on a page by setting its offset position from the left, right, top, and bottom margins. When an element is positioned absolutely, it is removed from the normal flow, and has no effect on other elements in the normal flow.

If the style below was set to be used by an object, the object would be positioned 325 pixels from the left of the browser window and 400 pixels from the top. The object would be 300 pixels wide, 30 pixels tall, and have a one pixel border.

Note: CSS codes are to be placed in the <head> section of your HTML document. They can also be placed in External Style Sheets.

Code:
------------------------------------------------------------------------
<style type="text/css">

#box1
{
position: absolute;
left: 400px;
top: 400px;
width: 300px;
height: 30px;
border: 1px;
}

</style>
------------------------------------------------------------------------

Expanding on the code above, a simple box can be created as an alternative to HTML tables.


This box is 302 pixels wide, including the border.

 

Code:
------------------------------------------------------------------------
<style type="text/css">

#box1
{
left: 200px;
top: 400px;
width: 300px;
height: 30px;
border: 1px;
border-color: #000000;
background-color: #F0F0F0;
padding: 5px;
display: table;
}

</style>
------------------------------------------------------------------------

The above style may be specified in an HTML document as follows.

Code:
------------------------------------------------------------------------
<p class="box1">
This box is 302 pixels wide, including the border.</p>

------------------------------------------------------------------------


 
 

Affiliates

GuiStyles Photoshop Tutorials
Tutorial Man Wallpaper Stock  More

Resources