CSS position property explained
In this article, we'll focus on the CSS position property. We are going to learn the various values of the CSS position property and how they work.
Introduction to CSS Positions
The position property determines how an element is positioned in a document. In this blog, we will learn about the different positions in CSS
Before we start how elements are positioned Normally?
By default, elements follow the box model. Everything in HTML is a box. The block element will take the entire width of the parent. Block elements always start from a new line. On the other hand, the size of Inline elements is just the size of their content
Positioning Context and Helper properties
Positioning context is the reference point of these positioned elements. We have four helper properties they are top, bottom,right, and left with the help of these properties we can move the positioned elements across the screen from their positioning context
Position : Static
The default position of any HTML element is static. An element with position: static is not positioned in any special way; it is always positioned according to the normal flow of the page. positioning context and helper properties will not apply for a static element
Position : Relative
When we give position: relative to an HTML element The positioning context is the place where that element would have been placed in a normal flow of HTML document.
position: relative elements keep the space originally reserved for it in the normal flow.
In the above code sample left: 200px and top:0px is given to the relatively positioned Box 2. Box 2 has moved 200px from its normal position but its top remains the same. It can be also observed that sibling elements are not moving to occupy their position.
Position : Absolute
The absolute positioned element is taken out of the normal flow entirely. This means that other elements in the document will act as the element with position: absolute doesn’t exist.
The position context of an absolute element has two different behavior
- If no ancestor has position property applied it will start to refer to the viewport
- If any of the ancestors have position property applied it will refer to the closest positioned ancestor
In the above example, there are no positioned ancestors hence absolute element referred viewport
In the above example, position: relative is given to the container(class name) div now absolute positioned element starts to refer to that container
Note: The ancestor can have any position property except static
Position : Fixed
An element under position: fixed is also removed from the normal document flow. The positioning context of the fixed element is the viewport. The fixed element is fixed with respect to the browser's viewport and does not move when scrolled.
Position : Sticky
The elements with position: sticky can be explained as a mixture of relative and fixed positioned elements. The element is treated as relative positioned until it crosses a specified threshold, at which point it is treated as fixed positioned.
The positioning context of the sticky element is the parent element. Notice how sticky-positioned elements are only sticky within their parent element.