While straight HTML will allow you some control of the position of elements through tables and using the non-breaking space ( ), you can't position things very precisely. With Cascading Style Sheets (CSS) you can place an item on a page at an exact x and y coordinate.
The two attributes you will use the most with the position tag are relative and absolute.
Relative Position
This allows you to place an object in relation to where it would normally have been positioned if only HTML were the only position control. What this means is that you position an HTML element within the current flow of the document. It gives you less control over the actual layout of the page, but allows you to position elements within the page itself.
For example: If you place text on a page, and then place an image after it, the image will be positioned directly after the text (barring any alignment tags). If you add a relative position style tag to the image, you can place it further down the page, or even directly on top of the text.
Relative Positioning Example
<p>
My first HTML element is this text, then an image
<img src="http://images.about.com/sites/guidepics/html.gif" width="50" height="50" border="0"><br>
<span style="color : #cc0000;">Then another text block</span>
</p>
But if I add in CSS positioning, I can move the second text block to overwrite the image:
<p>
My first HTML element is this text, then an image
<img src="http://images.about.com/sites/guidepics/html.gif" width="50" height="50" border="0"><br>
<div style="position:relative; left:30px; top:-65px; color : #cc0000;">
Then another text block</div>
</p>
Notice, the text within the <div> tag is now above the first block of text.
Absolute Position
Absolute positioning takes its starting point from the upper left corner of the browser pane, this is coordinate 0,0. One thing to remember is that once you use absolute positioning, this object does not affect any other object in the flow.
Absolute positioning allows you to position an object precisely where you want it to be. This gives you a huge amount of control over your Web site. Even if the browser window is smaller than your page requires.
Using this HTML, my image will be positioned 500 pixels from the left.
<div style="position: absolute; left: 500px; top: 20px;">
<img
src="http://a1028.g.akamai.net/6/1028/968/cdeaebfc020917/images.about.com/sites/guidepics/html.gif"
width="50" height="50" border="0">
</div>
First Page: Backgrounds > 1, 2, 3
