Collected by
Elizabeth Janson
Home Page

Absolute Positioning

absolute positioning

Better with Internet Explorer

Bug in IE - position: absolute only works on DIV and TABLE

This example uses absolute position, which is measured from the top, left corner. Space was forced, using <BR> <BR> and the two menu headings have been relocated
from top: 0em; left: 0em

Products Locations Telephones Computers Portable MP3 Players Wisconsin Idaho

<STYLE>
  .menu1 { position: absolute; top: 6em; left: 6em; 
           margin: 0px; font-family: sans-serif; 
           font-size: 120%; color: red; background-color: white }  
  .menu2 { position: absolute; top: 6em; left: 16em; 
           margin: 0px; font-family: sans-serif; 
           font-size: 120%; color: red; background-color: white }
  .item1 { position: absolute; top: 7em; left: 0em; margin: 0px }
  .item2 { position: absolute; top: 8em; left: 0em; margin: 0px }
  .item3 { position: absolute; top: 9em; left: 0em; margin: 0px }
  .item4 { position: absolute; top: 7em; left: 14em; margin: 0px }
  .item5 { position: absolute; top: 8em; left: 14em; margin: 0px }
  #box { position: absolute; top: 5em; left: 5em } 
</STYLE>
<div class="box">
  <span class="menu1">Products</span> 
  <span class="menu2">Locations</span> 
  <span class="item1">Telephones</span> 
  <span class="item2">Computers</span> 
  <span class="item3">Portable MP3 Players</span> 
  <span class="item5">Wisconsin</span> 
  <span class="item4">Idaho</span>
</div>

Layered presentation

Notice the green text overlays the blue, both overlay the image.
In the following sections, the expression "in front of" means closer to the user as the user faces the screen.

In CSS2, each box has a position in three dimensions. In addition to their horizontal and vertical positions, boxes lie along a "z-axis" and are formatted one on top of the other. Z-axis positions are particularly relevant when boxes overlap visually. This section discusses how boxes may be positioned along the z-axis.

Each box belongs to one stacking context. Each box in a given stacking context has an integer stack level, which is its position on the z-axis relative to other boxes in the same stacking context. Boxes with greater stack levels are always formatted in front of boxes with lower stack levels. Boxes may have negative stack levels. Boxes with the same stack level in a stacking context are stacked bottom-to-top according to document tree order.

For a positioned box, the 'z-index' property specifies:

The stack level of the box in the current stacking context.
Whether the box establishes a local stacking context.

Values have the following meanings:

<integer>: This integer is the stack level of the generated box in the current stacking context. The box also establishes a local stacking context in which its stack level is '0'.
auto: The stack level of the generated box in the current stacking context is the same as its parent's box. The box does not establish a new local stacking context.

In the following example, the stack levels of the boxes (named with their "id" attributes) are: "text2"=0, "image"=1, "text3"=2, and "text1"=3. The "text2" stack level is inherited from the root box. The others are specified with the 'z-index' property.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<HTML>
  <HEAD>
    <TITLE>Z-order positioning</TITLE>
    <STYLE type="text/css">
      .pile { 
        position: absolute; 
        left: 4cm; 
        top: 20cm; 
        width: 4cm; 
        height: 3cm; 
      }
    </STYLE>
  </HEAD>
  <BODY>
    <P>
      <IMG id="image" class="pile" 
           src="test.gif" alt="A test image"
           style="z-index: 1">

    <DIV id="text1" class="pile" 
         style="color:green; z-index: 3">
      This text will overlay the test image.
    </DIV>

    <DIV id="text2">
      This text will be beneath everything.
    </DIV>

    <DIV id="text3" class="pile" 
         style="color:blue; z-index: 2">
      This text will underlay text1, but overlay the butterfly image
    </DIV>
  </BODY>
</HTML>

A test image

This text will overlay the test image.

This text will be beneath everything. This text will be beneath everything.

This text will underlay text1, but overlay the test image

This example demonstrates the notion of transparency. The default behavior of a box is to allow boxes behind it to be visible through transparent areas in its content. In the example, each box transparently overlays the boxes below it. This behavior can be overridden by using one of the existing background properties.

Email
CSS begins here

Back to block positioning or on to column positioning.

This page is part of Elizabeth Janson's web site

http://www.oocities.org/elizatk/index.html

My other sites are the Anglican Parish of Northern Mallee,
Tetbury residents in the Eighteenth Century
my Australian Family History and Barrie, our Family Poet.