In this article, we will understand the CSS position property used to position HTML elements.
The CSS position property defines the position of an element in a HTML document. This property works with the top, right, bottom, left and z-index properties to decide the final position of an element.
There are five values for position property :
1) static
2) relative
3) absolute
4) fixed
5) sticky
Let's discuss them in detail
Static
All elements in HTML are positioned as static by default. Elements are positioned according to the normal flow of HTML document.
The top, right, bottom, left and z-index properties do not affect an element with position: static.
Syntax
selector {
position: static;
}
Let's take an example.
Did you notice there is no change?
So we can say that there is an effect of top and left when the position is static.
I gave left :100px; still no change.
Relative
When position: relative element remains in the normal flow of the HTML document. But unlike static element, position of a relative element can be modified using top, right, bottom, left and z-index.
Syntax
selector {
position: relative;
}
Let's replace position: static with position: relative in our example.
Notice that the left and top properties now affect the position of the element.
Absolute
The elements are positioned relative to their parent elements with absolute positioning. The absolute elements are positioned relative to the closest ancestor with any position property other than static. If the closest ancestor has a static position, the element is positioned relative to the next parent element without the static position property.
Syntax
parent{
position: relative;
}
child{
position: absolute;
}
Notice that no space was created in the document for the element. The element is now positioned relative to the parent element.
Note : The absolute element is removed from its default position and moved to the new position. Hence its old position is occupied by the next element.
Fixed
Fixed position elements are similar to absolute elements. They are also removed from the normal flow of the document. But they are always positioned relative to the element.
Scrolling doesn't affect elements when positioned as fixed. element stays at same position screen.
Syntax
selector {
position: fixed;
}
Let's take an example
The element is positioned relative to the element. Try scrolling.
Element is fixed at given position.
Sticky
Sticky is combination of relative + fixed. Element acts like a relatively positioned element until a particular scroll point and then it acts like a fixed element. you can better understand this with an example.
Syntax
selector {
position: sticky;
}
Now try scrolling. When blue div is 100px from top then it will act as fixed element.
Summary
- The CSS position property takes any of the values static, relative, absolute, fixed, and sticky.
- Static is the default position and follows the natural flow of the HTML document.
- Relative positioning follows the normal flow of the HTML document, but the position can be changed using top, right, bottom, left.
- Absolute positioning makes an element positioned relative to its parent with any position property other than static.
- Fixed positioning always positions an element relative to the HTML element i.e - the root of the HTML document.
- With sticky positioning, the element behaves like a relative positioned until a certain scroll point, and then it will be fixed.