CSS Element Positioning - Static & Relative

Position is perhaps the most important of all CSS properties since it determines the layout of page elements. It can have one of four values:

Static: This is the default value of the position property, i.e the value used if none is specified in the CSS style rule. Static boxes follow the rules of normal flow.
Relative: Relative is used to specify horizontal and vertical offsets for a box relative to its container. With relative positioning the rules of normal flow are applied before the box is offset - i.e., displaced horizontally and/or vertically. This means that such boxes do affect the positioning of their siblings. The offsets are specified by indicating the values of the left & top or right & bottom properties. There is no logical reason for specifying both left and right or both top and bottom. If this is done, the absolute values must be identical and the right/bottom value must be negative. Offsets may be ignored if using them would impede the application of a height or width setting. Relative positioning can result in boxes overlapping one another. Each browser has its own way of handling overlap. For this reason when overlaps are desired you should also specify the z-index style property in order to get consistent behavior across browsers. z-index is often used in concert with the opacity property to produce visual effects by placing a semitransparent box in front of another one which it partially overlaps.

<html>
   <head>
      <style>
         .posS{
            background-color:blue;
            width:4em;
            height:4em}
         .posR1{
            position:relative;
            background-color:red;
            left:3em;
            top:-1em;
            z-index:1}      
         .posR2{
            position:relative;
            background-color:green;
            left:6em;
            top:-8em}
         .posR3{
            position:relative;
            background-color:gray;
            left:9em;
            top:-9em;
            opacity:0.5;
            filter:alpha(opacity=50)}      
      </style>
   </head>
   <body>
       <div class="posS"></div>
       <div class="posS posR1"></div>
       <div class="posS posR2"></div>
       <div class="posS posR3"></div>      
    </body>
<html>

The blue square, drawn first, has static positioning. Normal flow, NF, causes it to be placed in the top left hand corner.
The red square, drawn next, is relatively positioned. NF causes it to be positioned at 4em from the top and then it gets an offset of -1em
Next, we draw the green square. Its offset of -8em moves it to the top of its container. The red square has a higher z-index so it appears above the green one
Finally we position the gray square by giving it a Y offset of -9em to move it from its NF position of 12em from the top. Its opacity setting gives it partial transparency causing the green square under it to show through

It should be noted that since positioning of relative boxes is done under normal flow rules the calculated height requirement for the container is excessive. This can lead to the browser displaying an unrequired vertical scrollbar if the overflow:auto CSS property is specified for the containing box. As is often the case, IE turns out to be the most recalcitrant browser. In the present example it ignores the style settings of height:9em; and overflow:none and insists on drawing a container box that is 16em in height. Another instance of deviant behavior is when the text-align:center or text-align:right property settings are applied to the style of the container box. Strictly speaking the text alignment property should be applied only to contained text, not to child boxes. IE insists on doing so with the result that relatively positioned child boxes end up with the wrong placement.

▼Jump To...

◄ ►