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