CSS Positioning

Positioning elements on a page can be tricky some times. There is a lot to remember, but if you can master CSS Positioning then you should be on the right track.

CSS Positioning consists of 4 main declarations:

• Static
• Fixed
• Relative
• Absolute

The static position (position:static;) is the default for HTML elements. It basically means that the element will follow the flow of the page and act as you’d expect them to.

position:fixed; is a little different. The element with this declaration will be placed exactly where you specify and will not move even when the browser window is scrolled. See the example:
.fixed_div {
  position:fixed;
  top:0px;
right:10px;
}

Next we have relative positioning. A relatively positioned HTML element is positioned relative to where it would normally be. Let’s see the example:
.relative_div {
  position:relative;
  left:20px;
}
This div would be 20 pixels to the right of where it would normally be. Setting left:-20px; would move it to the left.

An absolutely positioned element is quite different to the others. The absolutely positioned elements will be placed exactly where you specify on the page, but all other elements on the page will totally ignore it. Take the following example:
.abs_div{
  position:absolute;
  top:10px;
}
That element will now appear at the top of the page and will (probably) overlap the rest of your content.

Using position:absolute; it is possible to overlap elements over one another. Let’s have a look at the following:
.abs_div{
  position:absolute;
  top:10px;
  width:200px;
  height:200px;
  background-color:red;
}

.abs_div_over{
  position:absolute;
  top:20px;
  width:200px;
  height:200px;
  background-color:blue;
  z-index:1;
}

The above will create 2 boxes at the top of the page, one is red and one is blue. We have introduced the z-index declaration. Previously we have used the x and y coordinates (left and top), z-index defines the position of the elements on the page on the z-axis. The higher the z-index, the further up the pile it is. The default for z-index is 0, so setting 1 means it will overlap default elements.

When using z-index I suggest always using number in the thousands. So if you only have one element you want to be placed on top then give it a z-index of 1000. Doing it this way gives you lots of scope for the future. In 6 months time you might want to add an element inbetween the two original ones, which if you used z-index:1; would mean recoding, with z-index:1000; you simply add one inbetween.