CSS

CSS Layout - The position Property

The position property specifies the type of positioning method used for an element (static, relative, fixed or absolute).
The position Property
There are four different position values:
  • static
  • relative
  • fixed
  • absolute
Elements are then positioned using the top, bottom, left, and right properties. However, these properties will not work unless the position property is set first.

1. position: static;

  • HTML elements are positioned static by default.
  • Static positioned elements are not affected by the top, bottom, left, and right properties.
  • It is always positioned according to the normal flow of the page.
Example :
div.static {
    position: static;
    border: 3px solid #73AD21;
}

2. position: relative;

  • An element with position: relative; is positioned relative to its normal position.
  • Setting the top, right, bottom, and left properties of a relatively-positioned element will cause it to be adjusted away from its normal position.
Example :
div.relative {
    position: relative;
    left: 30px;
    border: 3px solid #73AD21;
}

3. position: fixed;

  • An element with position: fixed; is positioned relative to the viewport, which means it always stays in the same place even if the page is scrolled.
  • The top, right, bottom, and left properties are used to position the element.
Example :
div.fixed {
    position: fixed;
    bottom: 0;
    right: 0;
    width: 300px;
    border: 3px solid #73AD21;
}

4. position: absolute;

  • An element with position: absolute; is positioned relative to the nearest positioned.
  • It uses the document body, and moves along with page scrolling.
Example :
div.relative {
    position: relative;
    width: 400px;
    height: 200px;
    border: 3px solid #73AD21;
} 

div.absolute {
    position: absolute;
    top: 80px;
    right: 0;
    width: 200px;
    height: 100px;
    border: 3px solid #73AD21;
}

4. Overlapping Elements

    • When elements are positioned, they can overlap other elements.
    • The z-index property specifies the stack order of an element (which element should be placed in front of, or behind, the others).
    Example :
    img {
        position: absolute;
        left: 0px;
        top: 0px;
        z-index: -1;
    }