XHTML and CSS - Fixed Positioning
Fixed Positioning
In this tutorial we'll be looking at fixed positioning, it's the last positioning I'll be looking at in this tutorial series. Fixed positioning is a lot like absolute positioning, in the way that you have a coordinate in the top left of your screen and you're moving the element away from that top left position. The only difference between fixed positioning and absolute positioning is that whenever you scroll your screen down the element with fixed positioning is not going to move with the rest of the elements on your page. First we need to create two divs, and give them the classes divOne and divTwo.
<html> <head> <title> This is the title. </title> <style type="text/css"> </style> </head> <body> <div class="divOne"></div> <div class="divTwo"></div> </body> </html>
Next I'm going to make div one 100% of the width of the screen, 30 pixels high and have a red background color. Then I'm going to make div two 20% of the width of the screen, 2000 pixels high and have a green background color and also give it a 2 pixel dashed yellow border.
<html> <head> <title> This is the title. </title> <style type="text/css"> .divOne { background-color: red; width: 100%; height: 30px; } .divTwo { background-color: green; width: 20%; height: 2000px; border: 2px dashed yellow; } </style> </head> <body> <div class="divOne"></div> <div class="divTwo"></div> </body> </html>
When you view this you will just see a red and a green box and when you scroll down the page everything stays in the same place, next I'm going to set the position of div one to fixed.
<html> <head> <title> This is the title. </title> <style type="text/css"> .divOne { background-color: red; width: 100%; height: 30px; position: fixed; } .divTwo { background-color: green; width: 20%; height: 2000px; border: 2px dashed yellow; } </style> </head> <body> <div class="divOne"></div> <div class="divTwo"></div> </body> </html>
When you view this in your browser you will see that when you scroll down the page div one doesn't move, it stays at the top of the page.

Page generated in 0.0043 seconds.