MilkAddict

In this section I will explain how to position CSS elements.

Inline and Block Boxes

CSS elements can be block boxes or inline boxes.

• Block boxes are displayed as block of content, and the elements p, h1, div are an example of block bloxes. They will be displayed vertically one after another and we can regulate distances with margins properties.

• Inline boxes are for example span or strong. Their content is displayed whitin lines. We can set only horizontal padding, borders and margins, but the only way to change the height of an inline box is through the line-height property.

We can change the behaviour of an element using the display property, giving it the values inline, block or none. Using the value none the box as well as its content is not displayed at all:

li {display:inline}
span {display:block}
img.hidden {display:none}

Positioning

Let’s now have a look at how to position elements or how to place an element behind another, or how to specify what should happen when an element’s content is too big.

Elements can be positioned using the top, bottom, left, and right properties as you can see in the following examples. However, before using these properties, we need to set the position property first. They also work differently depending on the positioning method.

There are four different positioning methods:

• Static positioning
• Fixed positioning
• Relative positioning
• Absolute positioning

Static positioning

HTML elements are positioned static by default. A static positioned element is always positioned according to the normal flow of the page and is not affected by the top, bottom, left, and right properties.

Fixed positioning

The element is positioned relative to the browser window, therefore it will not move even if the window is scrolled:

p.position_fixed
{
position:fixed;
top:15px;
right:10px;
}

Due to this behavior, fixed positioned elements are removed from the normal flow and the document and other elements behave as if the fixed positioned element would not exist. Fixed positioned elements can therefore also overlap other elements.

Relative positioning

A relative positioned element is positioned relative to its normal position.

 h3.position_left
{
position:relative;
left:-10px;
}
h3.position_right
{
position:relative;
left:10px;
}

The content can be moved and can overlap other elements, but the reserved space for the element is still preserved in the normal flow.

h3.position_top
{
position:relative;
top:-20px;
}

These elements are often used as container blocks for absolutely positioned elements.

Absolute positioning

An absolute position element is positioned relative to the first parent element that has a position other than static. If no such element is found, the containing block is :

h3
{
position:absolute;
left:50px;
top:100px;
}

Also absolutely positioned elements are removed from the normal flow and the document and other elements behave as if the absolutely positioned element would not exist. Absolutely positioned elements can therefore overlap other elements.

How to control overlapping elements

When elements are positioned outside the normal flow, they can overlap other elements. In order to control the stack order of these elements the z-index property can be used. This property specifies which element should be placed in front of, or behind, the others.

An element can have a positive or negative stack order:

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

The element with greater stack order is always in front of an element with a lower stack order.