CSS Element Positioning - Absolute & Fixed

Absolutely positioned boxes, position:absolute; are not influenced by normal flow considerations. Neither do they affect the layout of other boxes that have been subjected to normal flow. Their container block is deemed to be one of the following:

The nearest ancestor that has a position setting other than static.
The initial containing block - which can generally be safely translated to mean the browser window or viewport.

The position:fixed; specification causes the box thus styled to behave in a way exactly identical to an absolutely positioned box. However, the containing block for a fixed box is always the viewport. Given that the viewport is always static, scrolling the browser window will have no effect on the position or visibility of a fixed box. Boxes with fixed positioning can be used to very good effect to deliver areas of the webpage that are always on view. Sadly, this feature is rendered all but useless by the fact that IE6 has no understanding of this setting. Things wouldn't be so bad if it were to treat fixed boxes as absolutely positioned ones. Instead, they are subjected to normal flow rules - the worst possible option.

Absolutely positioned boxes do affect the display of other page boxes as a result of overlap, opacity and z-index specifications. Browsers, maintain stacking context information for every web page which they display. Generally speaking, boxes are stacked in their order of specification in the code - i.e., boxes that are specified earlier appear below boxes which are specified further down in the source. This default behavior can be altered by defining the z-index property. If z-index is specified for an absolutely styled box, the browser generates a separate stacking context. Any child boxes that have a positioning of absolute or relative are now added to this new stacking context, not the stacking context of the web page.

       
<html>
   <head>
     <style>
        .abs0,.abs1,.abs2,.abs3,.abs4{
           border-style:solid;
           border-width:0.05em;
           border-color:black;}
        .abs0{
           position:absolute;
           background-color:lime;
           left:55em;
           top:28em;
           width:4em;
           z-index:100}
        .abs1{
           position:relative;
           background-color:red;
           left:4em;
           top:1em;
           width:3em;
           opacity:80;filter:alpha(opacity:80);
           z-index:300}
        .abs2{
           position:relative;
           background-color:blue;
           left:5em;
           top:-1.1em;
           width:4em;
           z-index:120}
        .abs3{
           position:relative;
           background-color:gray;
           left:60em;
           top:28em;
           width:4em;
           z-index:200}
        .abs4{
           position:absolute;
           background-color:yellow;
           left:65em;
           top:28em;
           width:2em;
           z-index:130}
     </style>
  </head>
  <body>
    <div class="abs0">
       <div class="posS abs1"></div>
       <div class="posS abs2"></div>
    </div>
    <div class="abs3"></div>      
    <div class="abs4"></div>      
  </body>
</html>

The green box is absolutely positioned and specifies a z-index of 100.
It contains the red and blue boxes, both of which use relative positioning.
These latter boxes are added to the stacking context of their container, not that of the document.
The blue box is partially obscured by the red one which has a higher z-index.
The gray box is an independent, absolutely positioned box.
It stacks above the red box since its z-index is higher than that of the green box, the container for the red box.
The yellow box too is independent & absolutely positioned. It stacks below the gray box but above the blue one.
The opacity setting of 80 makes the red box partially transparent.

True to form, IE throws normal flow rules out of the window and comes up with its own quirky layout.

▼Jump To...

◄ ►