Positioning with CSS

Note: It is important that you read the CSS box model post before reading this post. 

Still wondering why you should use CSS instead of tables?  Please read our forum post entitled, “Benefits of using CSS for Website Layout” before proceeding. 

Before CSS, web developers were pretty much stuck using tables for page layout.  With the emergence of CSS, we now have two more important tools: Positioning and floats. 

Positioning

The position property can be defined in one of four ways:

• Static
• Fixed
• Absolute
• Relative

Static Positioning

Static positioning is the default position for an element.  You really don’t need to use static, unless overriding a previously set position.  A static positioned element uses this code:

position: static;

Fixed Positioning

Elements that are set in the fixed position are positioned relative to the user viewport.  These elements will always be positioned in relation to the browser window, even when scrolling, which means they’re always visible in the viewport.  This could be extremely helpful and replace lengthy javascript which accomplishes the same task.  Don’t get too excited…Internet Explorer version 5 and 6 do not support fixed positioning.  It looks like we’re stuck with javascript until fixed positioning is universally supported.  A fixed position is displayed like this:

position: fixed;
 

Absolute Positioning

Elements positioned with absolute positioning are taken out of the normal flow and placed exactly where you define them to be.  Since they are taken out of the document flow, the rest of the document acts as if an absolute positioned element wasn’t even there.  While it allows for absolute control over the positioning, when using absolute positioning, be aware that it is easy to accidentally cover up other elements.  Absolute positioning is displayed like this:

position: absolute;
 

Relative Positioning

A relative positioned element is positioned relative to itself.  While that may sound confusing, it’s actually pretty simple.  If you set a relative position, the box will be moved relative to where it was supposed to be, had you not set a position.  For example, if I were to assign an element with relative positioning the value, ‘left: 20px’, the element will move 20px to the right from where it would have normally been placed.  When using relative positioning, other elements in the document flow treat the relatively positioned element as if it were in its static, or normal position.  Relative positioning is displayed like this:

position: relative;

• Quick Side Note: In the example above, I set the value, ‘left: 20px’, which moved the element to the right.  Sound confusing?  Here’s why that happens: When assigning a value such as ‘left: 20px’, I’m actually indicating that 20px should be placed to the left of the element, essentially moving it right.
  

Relative + Absolute Positioning

Relative positioning by itself doesn’t add many advantages over absolute positioning.  However, the true power of relative positioning comes when you combine it with absolute positioning

If an element is relatively positioned, any elements inside of it are positioned relative to it.  Therefore, if we had an absolute positioned element inside of a relative positioned element, the absolute positioned element is relative to the relative positioned element.  Too confusing?  Take a look at the image below:

The relative positioned red box contains the green box which is positioned absolutely as follows: ‘top: 50px; left: 50px; ‘

As you can see, Div 1 has become the containing block for Div 2, which is now positioned relative to Div 1.  If I were to reposition Div 1, say 100px to the left, Div 2 would move as well, and remain inside of Div 1.

This method becomes even more useful when we want to add columns to our layout.  Here’s a dual column layout using two absolutely positioned boxes inside of a relatively positioned one.

See how easy it is to create a two column layout with CSS?  However, what if you want to create a 3, or even 4 column layout?  The easiest way to do that is by using floats.

Floats

Floats turn block elements into inline elements.  They allow two elements to appear side by side, or make an element move to the right or the left inside of another element.  Also, floats are used when you would like text to wrap around an element or an image.  For example, here are two relatively positioned elements without floats. 

You’ll notice how they are stacked vertically.  This is the normal document layout.  What if I want them to line up horizontally?  I would add a couple floats, like this:

Here is the code used to create these floating boxes:

<html> 

<head> 
<style type="text/css"> 
div.div1 
{ 
background-color: red;
     position: relative;
     width: 150px;
     top: 10px;
     left: 50px;
     height: 150px;
     padding: 5px;
     border: 1px solid black;
     font-weight:bold;
     float: left; 
} 
div.div2 
{ 
background-color: green;
     position: relative;
     width: 100px;
     top: 20px;
     left: 75px;
     height: 100px;
     padding: 5px;
     border: 1px solid black;
     font-weight: bold;
     float: left; 
} 
</style> 
</head> 
<body> 
<div class="div1"> 
Relatively positioned<br> 

top: 10px;<br> 
left: 50px;<br> 
float: left; 
</div> 
<div class="div2"> 
Relatively positioned<br> 
top: 20px;<br> 

left: 75px;<br> 
float: left; 
</div> 
</body> 
</html>

You’ll notice that simply by adding a float to each element, they now line up horizontally.  If I wanted, I could even add another element to the right.  Keep in mind that I have turned these block level elements into inline elements with floats.  If I wanted to start a new row of floats underneath the first, I would have to clear the floats, by adding this code to the first element in the second line:

Clear: both;
 

There is one more tool that will come in handy when positioning with CSS: Z-index.  The z-index adds another dimension to a normally two dimensional page.  An element with a higher z-index appears in front of an element with a lower z-index.  For example, if I wanted an element to be displayed in front all the time, I would set a z-index of 99.  Z-index can be set like this:

z-index: 1;
 

These are the layout tools that come with CSS.  The more you use them, the easier layout will become, and the more options you will have when designing a page.  Keep in mind that not every browser handles CSS the same way, so please read the Cross-browser CSS post in the forum.