Position

The position property control the element positioned in the normal document flow with the help of top, bottom, left, right and z-index. It is one of the commonly used property in CSS.

Syntax

position: relative
position: absolute
position: fixed
position: sticky
position: static

Common Properties

top and bottom are used to specify vertical position of the element.

left and right are used to specify horizontal position of the element.

z-index is used to give stack order of the element. An element with greater z-index will always be in front of the element of lower z-index.

Common HTML example

We will be using this html through out the guide.

<div class="bigbox">
        <div class="smallbox">
            <h2>Hello World</h2>
        </div>
    </div>

---

relative

An element with position: relative is positioned relative to it's normal position based on the value of top, bottom, left, right.

CSS

.bigbox{
    border: 5px solid red;
    width: 150px;
}
.smallbox{
    border: 5px solid green;
    position: relative;
    left: 60px;
    top: 60px;
}

Output

---

absolute

An element with position: absolute is positioned relative to the nearest positioned parent element. Final position is determined by top, bottom, left, right properties.

CSS

.bigbox{
    border: 5px solid red;
    width: 150px;
}
.smallbox{
    border: 5px solid green;
    position: absolute;
    left: 60px;
    top: 60px;
}

Output

---

fixed

An element with position: fixed is positioned according to view port, which means it will always stays in the same page even after paged being scrolled. It is removed from normal document flow, and no space is reserved for the element in the page layout.

CSS

.bigbox{
    border: 5px solid red;
    width: 150px;
}
.smallbox{
    border: 5px solid green;
    position: fixed;
    left: 60px;
    top: 60px;
}

Output

---

sticky

An element with position: sticky is stuck to the view port of the user.

CSS

.bigbox{
    border: 5px solid red;
    width: 150px;
}
.smallbox{
    border: 5px solid green;
    position: sticky;
    left: 60px;
    top: 60px;
}

Output

---

static

An element with position: static is the default value. Element is positioned according to normal document flow. top, bottom, left, z-index have no effect on it.

CSS

.bigbox{
    border: 5px solid red;
    width: 150px;
}
.smallbox{
    border: 5px solid green;
    position: static;
    left: 60px;
    top: 60px;
}

Output