Position property¶

position property, allows you to determine the position of an HTML item relative to others. It can take the following values:

static - the default value that causes this element to be set "naturally".
relative - allows you to change the position using the top, bottom, left, right properties to your natural position. absolute - allows you to determine the position with the properties of the top, bottom, left, right with respect to a parent element which is in the relative* position (for which the postion property has value relative).
fixed - places the item at a fixed position relative to the browser window using the properties top, bottom, left, right. This value is often used to "glue" the menu at the top or side of the page.

In the following examples we will consider positioning on the basis of the following HTML code:

<div class="father">
    <div class="child-red">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ut quasi recusandae omnis, beatae libero ipsam ab facere dolorum illo ratione accusantium alias quam, adipisci repellat animi numquam rem nobis eum. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ut quasi recusandae omnis, beatae libero ipsam ab facere dolorum illo ratione accusantium alias quam, adipisci repellat animi numquam rem nobis eum.</div>
    <div class="child-blue">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ut quasi recusandae omnis, beatae libero ipsam ab facere dolorum illo ratione accusantium alias quam, adipisci repellat animi numquam rem nobis eum. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ut quasi recusandae omnis, beatae libero ipsam ab facere dolorum illo ratione accusantium alias quam, adipisci repellat animi numquam rem nobis eum.</div>
</div>

Static position¶

In the default position, i.e. static, the elements will be arranged as follows:

.father {
    background-color: orange;
    height: 1500px;
}

.child-red {
    background-color: red;
    height: 50px;
}

.child-blue {
    background-color: blue;
    height: 50px;
}

static position

Relative position¶

In the relative position, the element is positioned relative to its natural position, without releasing space for other elements, e.g:

.father {
    background-color: orange;
    height: 1500px;
}

.child-red {
    background-color: red;
    height: 50px;
    position: relative;
    left: 30px; /* 30px offset from the left */
    top: 30px; /* 30px offset from the top */
}

.child-blue {
    background-color: blue;
    height: 50px;
}

relative position

Absolute position¶

In the absolute position, the element is positioned relative to the parent element in the relative position, while freeing space for other elements.

.father {
    background-color: orange;
    height: 1500px;
    position: relative;
}

.child-red {
    background-color: red;
    height: 50px;
    position: absolute;
    left: 30px; /* 30px offset from the left */
    top: 30px; /* 30px offset from the top */
}

.child-blue {
    background-color: blue;
    height: 50px;
}

absolute position

Fixed position¶

The element using the value fixed is placed in a fixed position relative to the browser window. When the page is scrolled (if possible), it remains in the fixed position.

.father {
    background-color: orange;
    height: 1500px;
}

.child-red {
    background-color: red;
    height: 50px;
    position: fixed;
    left: 130px; /* 130px from the left relative to the browser window */
    top: 130px; /* 130px from the top relative to the browser window */
}

.child-blue {
    background-color: blue;
    height: 50px;
}

fixed position