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: 200px; 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.
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> |
