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
Paste the following into your Web page:
<p> My first HTML element is this text, then an image <img src="http://images.D106/sites/guidepics/html.gif" width="50" height="50" border="0" alt="Jennifer Kyrnin, About Web Design Guide" /><br> <span style="color : #cc0000;">Then another text block</span> </p>If I add in CSS positioning, I can move the second text block to overwrite the image. Try pasting this into your HTML:
<p> My first HTML element is this text, then an image <img src="http://images.D106/sites/guidepics/html.gif" width="50" height="50" border="0" alt="Jennifer Kyrnin, About Web Design Guide" /><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 even though it appears after the first text block in the flow of the HTML.
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.
Try Absolute Positioning Yourself
Place the following in your Web page. It shouldn't matter where in the code you place the paragraph, the image will display 500 pixels from the left and 500 pixels down.
<p> Scroll to the left to see my image, positioned 500 pixels from the left and 500 pixels down from the top of the browser window. </p> <div style="position: absolute; left: 500px; top: 500px;"> <img src="http://a1028.g.akamai.net/6/1028/968/cdeaebfc020917/images.D106/sites/guidepics/html.gif" width="50" height="50" border="0" alt="Jennifer Kyrnin, About Web Design Guide" /> </div>Previous Features