You want to design a website where you want to control your element's position on your website like you want to stack on top of one another.

But if you want to do the above magic, you need to override your default website position. To do the above, you’ll use CSS position property.

What is the position?

Position property helps to manipulate the location of the elements.

After applying for the position property then it will not change anything. To modify the position then you’ll need to apply the top, bottom, right and left properties, and in that way, you can move your element.

• top Element moves towards the bottom of the parent container.
• bottom Element moves towards the top of the parent container.
• left Element moves towards the right of the parent container.
• right Element moves towards the left of the parent container

Types of position

• Static
• Fixed
• Sticky
• Relative
• Absolute

Static

Every element has a static position by default. If we don’t mention the positioning method for any element, the element has the position: static. So, if there is a top, bottom left, or right set then there will be no effect on the element.

Syntax

.pos {
     postion: static;
}

Fixed

Element with fixed positioning allows it to remain at the same position even we scroll the page. We can set the position of the element using the top, bottom, left, and right.

Syntax

.pos {
     position: fixed;
}

Sticky

Element with position: sticky and top: 0 played a role between fixed & relative based on the position where it is placed. Depending on the user how far the user has scrolled down the page, a sticky element behaves like a relative element until it touches the **top**. When it touches the top, it will be fixed at that place and appears to stick to the page as the user scrolls.

Syntax

.pos {
     position: sticky;
}

Relative

Element with position: relative is positioned with the other elements and if we set its top, right, bottom, and left then the relative element will move from its original place. After the relative element moves, then other elements will not fill up the gap left.

Syntax

.pos {
     position: relative;
}

Absolute

Element with position: absolute will be positioned with respect to its nearest parent. If there is no positioned parent element, the element that has position absolute will be positioned directly to the page itself (body).

Syntax

.pos {
     position: absolute;
}

---

Thank you for reading 👨‍💻. If you found this article useful. Share your feedback that would help me in the future.