Positioning your elements in a webpage using CSS position property can be a bit troublesome if you don’t know how to use them properly. It’s important to understand the basics of the position property before using them on your webpage.
In this article, we are going to learn about various CSS position properties and their values. This article will help you understand how the position properties work and when you should use them.
Let’s begin!
Table of Contents
What is CSS position property?
It is a CSS layout technique used to position an element on a web page. It allows us to take an element from the normal flow layout and position the element wherever we want it to be.
The position property takes five values. They are:
- Static
- Relative
- Absolute
- Fixed
- Sticky
Let’s learn about them one by one.
Static
If you notice, you will see that there is no change in the static element even after giving it property left and top. This proves that the left and top property doesn’t work with position: static.
Relative
Elements using the property position relative remains within the normal flow of the webpage. But unlike static, we can use the left, right, top, bottom, and z-index properties to position the element in the webpage.
Now, let’s use an example with position: relative to see how it works.
.div2 {
border: 2px solid #40ff93;
background-color: #40ff93;
position: relative;
left: 20px;
top: 19px;
}
Now notice that the left and top properties now affect the position of the relatively positioned element and the element stays in the normal flow of the document.
Let’s move on to the next value
Absolute
The absolute value position the element by default relative to its closest ancestor/parent element. If a parent element has been given a position value then it will be positioned in that context.
It removes the element from the document’s normal flow and the other elements will act as if the element doesn’t exist. The left, top, bottom and right properties determine the final position of the element.
Note: Since it is positioned relative to its closest parent element, the parent must have a position value other than static.
In case the parent element doesn’t have the position value, it is positioned relative to the element.
Let’s check this out with an example
If you look closely, the div with class ‘div3’ is positioned absolute and is inside a parent div with class “container”. But the container class doesn’t have the position property, so the absolute element is positioned relative to the ‘<body>’ element.
Now let’s add the position property (position: relative) to the container class and see what happens.
notice how the absolute element is now positioned relative to the div with the class container.
Fixed
An element with position: fixed is positioned relative to the viewport. The element is removed from the normal flow of the document and placed on the viewport. The left, top, bottom and right properties determine the final position of the element.
It is similar to the position absolute except they are always positioned relative to the element. They’re not affected by scrolling so it always stays in the same place even if the page is scrolled.
Now the final value
Sticky
Very few people use position: sticky. It is a mix of relative and fixed, it acts like a relatively positioned element until a scroll point, and then it sticks like a fixed positioned element. For sticky positioning to work You must also specify at least one of the top, right, bottom, or left properties.
Let us see through an example
That’s it! I hope this article helped you get a better understanding of the CSS position property and its values. So now go ahead and use this property in your website or personal project like a CSS pro.
And if you liked this article very much don’t forget to share it with your friends and help them become a pro in CSS just like you.
