Understanding CSS Absolute Positioning and Layering

Introduction
It is possible for you to place an HTML element at a particular spot on your web page, independent of what is already there. In this article I do an in-depth treatment of that topic.

You need basic knowledge in CSS and HTML (XHTML) in order to understand this article.

Note: If you cannot see the code or if you think anything is missing (broken link, image absent), just contact me at forchatrans@yahoo.com. That is, contact me for the slightest problem you have about what you are reading.

CSS Normal Flow
Imagine that in your code, you have a series of inline elements and text, then a block-level (containing) element, then a series of inline elements and text again, then a block-level element, and finally a series of inline elements and text. All this code is inside a containing element such as the BODY or a DIV element.

Everything being equal (based on what we have learned so far), your browser will display the code as follows: It will start by displaying the inline elements and text, wrapping them to the next line as the end of the current line is reached. Then it will display the block-level element, which will occupy a complete horizontal stripe from the left end to the right end. After that the browser will continue to display the inline elements and text, wrapping then as the end of line is reached. Then it would display the second block-level element, which will as expected take one complete horizontal stripe from the left end to the right end. Lastly, it displays the inline elements and text, wrapping them. This is what is called the normal flow of HTML elements in CSS. Your web page design should always take a normal flow unless you want special features, as Absolute Positioning (see below).

HTML Element Dimensions
For your element to be positioned, it needs to have width and height. Some elements are created with their natural widths and height. For others, you have to give the widths and heights. You give the width and height to an element using the CSS "width" and "height" properties. The value to either of these properties is a number in px or percentage; other units may be used.

I advise you to avoid giving the height value to HTML elements. You usually would not know what height you should give an element. Besides when you give only the width value to an element, the browser chooses an appropriate height or the corresponding height for you. This applies to images.

Absolute Positioning and layering
It is possible for you to position an HTML element at a particular place on the area of your web page. As you can see from this possibility, the element so positioned, would have to cover the elements that are in the normal flow; and this is what actually happens. You can have many elements covering one another. Form the point of view of the web page user, one element is in front, the other element is behind the first, the next one is behind the second and so on. This covering of elements is called layering.

This group of covering elements is called a Stack. The position of an element in this stack is called the Stack Level or z-index position. Everything being equal, the BODY element is considered to be at z-index position zero. The elements in the normal flow are considered to be at z-index position 1. You can then place elements in the stack from z-index position 2 upward. So if you have 3 element to stack, one will be at z-index position 3, another and z-index position 4 and one at z-index position 5. The element with the greatest z-index is the one the user is seeing foremost; the rest are covered.

To do absolute positioning, you need at least the following four CSS properties:

position
This property takes the value, "absolute" meaning you want absolute positioning. For normal flow placement or positioning, you do not need this property or any property at all.
top
The value here is a number in px or percentage. The element is placed within the area of some containing element. This is the vertical distance from the top edge of the containing element, to the top edge of the element being placed.
left
The value here is also a number in px or percentage. The element is placed within the area of some containing element. This is the horizontal distance from the left edge of the containing element, to the left edge of the element being placed.
z-index
This is the z-index position of the element (layer). The value is a whole number (integer). Negative values are possible, but I will not talk about that. I advise you to start given your z-index position from 2 upwards.

Read and try the following code (use your own image):

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

div {width:400px}
img {position:absolute; top:50px; left:50px; z-index:2}

text text text text text text text text text text text text text text text text text
text

DIV DIV DIV DIV DIV DIV DIV DIV DIV DIV DIV DIV DIV DIV DIV DIV DIV DIV DIV DIV DIV DIV DIV DIV DIV DIV DIV DIV DIV DIV DIV DIV DIV DIV DIV DIV DIV DIV DIV DIV DIV DIV DIV DIV DIV DIV DIV DIV DIV DIV DIV DIV DIV DIV DIV DIV DIV DIV DIV DIV DIV DIV DIV DIV DIV DIV DIV DIV DIV DIV DIV DIV DIV DIV DIV DIV DIV DIV DIV

The element for absolute positioning is placed anywhere within the containing element in the code. The CSS rule determines its exact position within the containing element at the browser. It can also be outside the containing element if you use negative values for the top and left properties, but I will not talk about that.

The Table Cell and Absolute Positioning
The HTML table cell (TD element) behaves as a containing element in many ways, but it is not really a containing element. If you do absolute positioning in a table cell as we have done above for the DIV element, the image will not be positioned relative to the top and left edges of the table cell. It will instead be positioned relative to the top and left edges of the containing element having the Table for the cell.

If you want an absolute positioned element in a table cell, convert that element into an inline element. Place it in the cell in the normal flow. Omit the top and left CSS properties of the element in question. The element will appear in the cell in the position of the normal flow, but it would cover the texts (or other inline elements), which were on its right and below it in the code. Try the following code, which illustrates this:

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

img {position:absolute; z-index:2}

one one one one one one one one one two two two src="myImage.gif">two two two two two two

CSS Properties for Absolute Positioning
In this section I give you all the properties for absolute positioning that you would need. Note: if you use the bottom and right properties below, then you would not have to use the top and left properties.

position
This property takes the value, "absolute" meaning you want absolute positioning
top
This value is a number in px or percentage. Other units can be used. This is a vertical distance from the top edge of the containing element, to the top content edge of the element being placed.
left
This value is a number in px or percentage. Other units can be used. This is a horizontal distance from the left edge of the containing element, to the left content edge of the element being placed.
right
This value is a number in px or percentage. Other units can be used. This is a horizontal distance from the right edge of the containing element, to the right content edge of the element being placed.
bottom
This value is a number in px or percentage. Other units can be used. This is a vertical distance from the bottom edge of the containing element, to the bottom content edge of the element being placed.
z-index
This is the z-index position of the element (layer). The value is a whole number (integer). Negative values that will take the element behind, are allowed.

Some Application of Absolute Positioning
Absolute positioning goes with layering.

- Assume that a user is reading a web page, he might want to see something quickly without downloading another page and then return to what he was reading or doing on the page. You can use Absolute Positioning and Script (JavaScript) to do this.
- You can use Absolute Positioning with Script to produce animation. The script will be changing the layers as a result of some events or timing intervals.
- Similar to the above, you can use absolute positioning for web page games.

Chrys