Positioning – Web Scripting

By default, elements are stacked vertically or horizontally on the page. CSS positioning allows us to move an element from its default position, even if the new position makes the element overlaps another element.

The position property has 4 commonly supported values: static, relative, absolute, and fixed. An element is said to be positioned if its position value is anything other than static.

Static

The static value positions an element according to the normal flow.

Relative

An element that has its position property set to relative is positioned relative to its normal position by offsetting its position according to the top, bottom, right, and left properties.

The top property adds a vertical offset with positive values moving the position of the element down from its natural top position.
The bottom property adds a vertical offset with positive values moving the position of the element up from its natural bottom position.
The left property adds a horizontal offset with positive values moving the position of the element right from its natural left position.
The right property adds a horizontal offset with positive values moving the position of the element left from its natural right position.

If both the top and bottom properties are set, then bottom property is ignored. Similarly, if both the right and left properties are set, then the right property is ignored.

If the element overlaps another element we can specify which element is visible using the z-index property. An element with a higher z-index is positioned over the elements with a lower z-index.

Below are 3 inline-block div elements positioned naturally (with left and right margins).

div

In the example below, we set its position, top, and left properties. The element is positioned down and to the right of its natural position.

div

#gray-box div:nth-of-type(2) {
    position: relative; 
    top: 15px; 
    left: 15px;
}

Absolute

No space is added to the natural flow of the document and new stacking layer is created for an element that has its position set to absolute.

It is positioned relative to either:

its closest positioned ancestor or
the initial containing block (html element) if no ancestor element has been positioned.

The element’s position property is offset from its ancestor’s position according to the top, bottom, right, and left properties.

The top property adds a vertical offset with positive values moving the position of the element down from its ancestor’s top edge.
The bottom property adds a vertical offset with positive values moving the position of the element up from its ancestor’s bottom edge.
The left property adds a horizontal offset with positive values moving the position of the element right from its ancestor’s left edge.
The right property adds a horizontal offset with positive values moving the position of the element left from its ancestor’s right edge.

If the height property is set to auto and the top and bottom properties are set, the element will fill the vertical space. Similarly if the width property is set to auto and the left and right properties are set, the element will fill the horizontal space.

Elements with the position property set to absolute can have margins and the margins do not collapse with the margins of other elements.

In the example below, we set the position property of the gray box div to relative and set the position property of the second div to absolute. The element is positioned relative to the gray box, below and to the right of the top and left side of the gray box respectively.

div

#gray-box {
    position: relative;
}

#gray-box div:nth-of-type(2) {
    position: absolute;
    top: 15px;
    left: 15px;
}

The z-index property can be set on any positioned element. If a positioned element does not have its z-index property set, it’s set by default to auto, effectively giving it a value of 0. In the example below, the first div’s position property is set to relative and its z-index property is set to 1 and leaves all other element’s z-index unchanged.

div

#gray-box div:nth-of-type(1) {
    position: relative;
    z-index: 1;
}
#gray-box div:nth-of-type(2) {
    position: absolute;
    top: 15px;
    left: 15px;
}

Fixed

No space is added to the natural flow of the document for an element that has its position set to fixed. It is positioned relative to the viewport and is fixed (i.e. does not move) when the page is scrolled. This allows you to create fixed UI features that remain fixed when the page is scrolled.

The element’s position property is offset from the viewport’s position according to the top, bottom, right, and left properties.

The top property adds a vertical offset with positive values moving the position of the element down from the viewport’s top edge.
The bottom property adds a vertical offset with positive values moving the position of the element up from the viewport’s bottom edge.
The left property adds a horizontal offset with positive values moving the position of the element right from the viewport’s left edge.
The right property adds a horizontal offset with positive values moving the position of the element left from the viewport’s right edge.