Position property¶

The position property, allows you to specify the location of a given HTML element * 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 propertiestop, bottom, left, right relative to your natural position
absolute - allows to set the position with the properties top, bottom, left, right relative to the parent element which is in the relative position (i.e. one that which for the property postion has the value relative)
fixed - places an element in a fixed position relative to the browser window using the properties top, bottom, left, right (this value is often used to "stick" the menu to the top or side of the page)

In the following examples, we will consider positioning based on 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>

Position static¶

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

Position relative¶

In a relative position, an element positions itself relative to its natural position, not releasing space for other elements, e.g.:

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

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

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

relative position

Position absolute¶

In the absolute position, the element positions itself in relation 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; /* offset from the left by 30px */
    top: 30px; /* offset from the top by 30px */
}

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

absolute position

Position fixed¶

An element that uses the value fixed is placed in a fixed position relative to the browser window. At the moment of scrolling the page (if it is possible), it remains at the agreed place.

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

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

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

fixed position