Primary Menu

Knowing More When It Comes to CSS Positioning

Using the CSS positioning properties is another one of the more basic lessons that you should learn about CSS. Here are some of the uses for this property:

For determining the position of an element within a page.

It can be used for placing an element behind another one.

It can be used for defining what would happen when the element is too large for the page.

These are the most common uses for positioning properties. There are four properties that can be used in positioning. These are the top, bottom, left and right properties. Before these four properties are set, the position property must be defined initially. The method of positioning would also determine a great deal.

You also have to learn about the different positioning methods of which there are four in use today. These positioning methods are the static, fixed, relative and absolute positioning.

The Static Positioning

In static positioning an element is placed on the page in its natural flow. This is the default positioning used in most pages. Elements that are placed in a static position are not affected by the top, bottom, left and right properties.

Fixed Positioning

When you use fixed positioning, the elements will be placed in relation to the window of the browser. This means that it is not going to move if you scroll down the window. Since the elements will move with browser window, an element using fixed positioning will overlap other elements. Here are some examples of codes used for fixed positioning:

p.pos_fixed
{
position:fixed;
top:40px;
right:5px;
}

Relative Positioning

In this type of positioning, the element is placed relatively to its normal location or position on the page. These elements can be moved around. But even when they are moved around the spaces reserved for them remain the same. Here is an example code for a relatively positioned element:

h2.pos_top
{
position:relative;
top:-50px;
}

Absolute Positioning

An element using absolute positioning is placed relatively to an element that uses either fixed or relative positioning. Absolutely positioned elements can overlap others that are placed within a page. Here is an example code that can be used:

h2
{
position:absolute;
left:120px;
top:170px;
}

The Question of Overlapping Elements

When elements are not within the normal flow then it is possible for them to overlap other elements. When this is the case the z-index property is used. This property is used for determining which elements should actually be placed in front and which ones should be placed behind. Here is a sample code for z-index property. As you might notice it can have either a positive or a negative stack order:

img
{
position:absolute;
left:0px;
top:0px;
z-index:-1;
}

The stack order is used to determine which element would come first. The element with a stack order that is greater is supposed to come out first than one that has a lower stack order. Now if you do not put in a z-index property for elements that are overlapping, then the element that was placed last in the HTML would be the one shown on top.