XHTML and CSS - Relative Positioning
Relative Positioning
In this tutorial we're going to be looking at relative positioning, relative positioning is a bit like absolute positioning but also very different to absolute positioning, you'll see why by the end of this tutorial. First let's create 4 paragraphs and give the third paragraph down a class of third.
<html> <head> <title> This is the title. </title> <style type="text/css"> </style> </head> <body> <p> This is some random text in our first paragraph. </p> <p> This is some random text in our second paragraph. </p> <p class="third"> This is some random text in our third paragraph. </p> <p> This is some random text in our forth paragraph. </p> </body> </html>
Next we'll change some styling on the third paragraph, we'll set the background color to green, set the positioning to absolute, move it 70 pixels from the top and 25 pixels from the left.
<html> <head> <title> This is the title. </title> <style type="text/css"> .third { background-color: green; position: absolute; top: 70px; left: 25px; } </style> </head> <body> <p> This is some random text in our first paragraph. </p> <p> This is some random text in our second paragraph. </p> <p class="third"> This is some random text in our third paragraph. </p> <p> This is some random text in our forth paragraph. </p> </body> </html>
When you view this, you're going to see 4 paragraphs with the 3rd one being 70 pixels from the top and 25 pixels from the left and that it's sitting over the top of our 4th paragraph, now change the position from absolute to relative and refresh your page and see how it has changed.
<html> <head> <title> This is the title. </title> <style type="text/css"> .third { background-color: green; position: relative; top: 70px; left: 25px; } </style> </head> <body> <p> This is some random text in our first paragraph. </p> <p> This is some random text in our second paragraph. </p> <p class="third"> This is some random text in our third paragraph. </p> <p> This is some random text in our forth paragraph. </p> </body> </html>
You will see that the box is no longer overlapping our other paragraph, you might be wondering why because we told it to go 70 pixels down and that would be overlapping our 4th paragraph, this is because of relative positioning. Relative positioning is different to absolute positioning because it instead of moving it absolutely from the top left point, it moves it in relation to where it would usually be, witch in this case is just under our forth paragraph.

Page generated in 0.0053 seconds.