Understanding CSS Absolute Positioning and Layering

Google+ Pinterest LinkedIn Tumblr +

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, text), 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.

Share.

About Author

Leave A Reply