XHTML and CSS - Absolute Positioning
Absolute Positioning
In this tutorial we're going to be looking at absolute positioning in CSS. Before we was making webpages and we added a image, header and some paragraphs everything appeared after one and other, it flowed together in a nice order, your image knew not to appear on top of your text etc. While this is good, it didn't give you that much control over your webpage, we can use absolute positioning to change this. First I'm going to add two div's and then I'm going to show you how to move them around the screen.
<html> <head> <title> This is the title. </title> <style type="text/css"> </style> </head> <body> <div class="topDiv">This is some text in the top div.</div> <div class="bottomDiv">This is some text in the bottom div.</div> </body> </html>
When you view this all you will have is two lines of text on your screen, I'm going to make the background color of the top div red, the background color of the bottom div black and give them both white text so we can see them better.
<html> <head> <title> This is the title. </title> <style type="text/css"> .topDiv { background-color: red; color: white; } .bottomDiv { background-color: black; color: white; } </style> </head> <body> <div class="topDiv">This is some text in the top div.</div> <div class="bottomDiv">This is some text in the bottom div.</div> </body> </html>
So now it's time to use the positioning tag I'm going to set this to absolute in the top div.
<html> <head> <title> This is the title. </title> <style type="text/css"> .topDiv { background-color: red; color: white; position: absolute; } .bottomDiv { background-color: black; color: white; } </style> </head> <body> <div class="topDiv">This is some text in the top div.</div> <div class="bottomDiv">This is some text in the bottom div.</div> </body> </html>
When you view this you will see that our top div is now on top of our bottom div, this is a problem you can have when setting the position to absolute. You might be thinking why is this useful, it's useful because now we can move our top div to anywhere we want, I'm going to move the top div 100 pixels from the top and 30 pixels from the left.
<html> <head> <title> This is the title. </title> <style type="text/css"> .topDiv { background-color: red; color: white; position: absolute; top: 100px; left 30px; } .bottomDiv { background-color: black; color: white; } </style> </head> <body> <div class="topDiv">This is some text in the top div.</div> <div class="bottomDiv">This is some text in the bottom div.</div> </body> </html>
Now as you can see they're no longer overlapping and the top div is exactly where we want it.

Page generated in 0.0055 seconds.