Greetings all! As a seasoned front-end developer, I've utilized the "position" property in CSS countless times. Yet, when asked about it in an interview, I stumbled to fully elaborate on its use and importance. Similarly, during interviews, I've found that many candidates struggle to explain this property, even though it's a commonly utilized aspect of CSS. With this article, my goal is to provide a comprehensive understanding of the "position" property, so that you can confidently answer questions about it in the future.
The CSS position property is a powerful tool for web design, allowing for precise control over the placement of elements on a page. With its versatility and widespread usage, it plays a crucial role in creating intricate and dynamic layouts.
The Position property takes four possible values:
Static
Relative
Absolute
Fixed
Static
The static value of the CSS position property is often overlooked due to its default nature. If no position property is explicitly set for an element, it automatically assumes a static position.
The static value of the position property in CSS positions elements in accordance with the normal flow of the document, as defined by HTML and CSS. For example, two block elements, such as an h1 heading and a p paragraph will display with the h1 taking up the full width of the container and the p rendering below it, also taking up the full width.
Relative
The relative value in the position property in CSS is similar to static, but with the added advantage of being able to offset the element from its normal position. When an element is given a position: relative, it retains its position in the normal flow of the document but can be shifted using properties such as top, bottom etc.
In the example shown, the div element has a position property set to relative, and a top property set to 20px. This results in the div being shifted downward by 20px from its original position in the normal flow of the document.
Absolute
Absolute positioning in CSS removes an element from the normal flow of the document and positions it relative to the nearest positioned ancestor element or, if none exists, the initial containing block (typically the <body> element).
For instance, if a parent container and a child container exist, and the child's position is set to absolute, it will be positioned relative to the viewport (i.e., the <body> tag).
To position the child div relative to the parent container, the parent container's position must be set to relative or fixed. Try giving position: relative/fixed to the parent container and see the position property in action.
When the page is scrolled, an element with absolute positioning will maintain its relative position to the ancestor element.
Fixed
The fixed value in the position property works similarly to absolute, but with the added benefit of being fixed in place even upon page scrolling. This means that the element remains positioned relative to the viewport, maintaining its position regardless of page scrolling or resizing. (Try scrolling the codepen).
This property is useful for creating header and footer sections that persist on the page, regardless of the user's scrolling behaviour.
That concludes our discussion. If you have any remaining questions or confusion, feel free to reach out in the comments. I'll be happy to assist you.
If you found this information helpful, kindly consider giving a like ❤️ as appreciation.