--- title: "What is the difference between absolute, relative, fixed, and sticky positioning in CSS?" description: "What is the difference between absolute, relative, fixed, and sticky positioning in CSS?" author: "Ashutosh Patel" published: 2024-10-18 updated: 2024-10-18 canonical: https://www.mindstick.com/interview/33978/what-is-the-difference-between-absolute-relative-fixed-and-sticky-positioning-in-css category: "css-css3" tags: ["html", "css selector", "css position"] reading_time: 2 minutes --- # What is the difference between absolute, relative, fixed, and sticky positioning in CSS? ## Relative positioning With `position: relative;`, the element is positioned relative to its normal position in the document flow. This allows you to offset the element from its original position without affecting other elements. However, the space it originally occupied is still preserved. ## Absolute positioning `position: absolute;` removes the element from the document flow, which means it no longer affects the layout of other elements. It is positioned relative to its closest positioned ancestor (an element with a `position` other than `static`). If there is no positioned ancestor, it will be positioned relative to the `` element. ## Fixed positioning `position: fixed;` also removes the element from the document flow, but unlike absolute positioning, it is always positioned relative to the viewport (browser window). It remains fixed in its place even when the page is scrolled. ## Sticky positioning `position: sticky;` lets the element behave like `relative` until the user scrolls to a certain point, after which it behaves like `fixed`. When the element reaches a determined scroll position (set using `top`, `right`, `bottom`, or `left`) it "sticks" in its place. ## Answers ### Answer by Ashutosh Patel ## Relative positioning With `position: relative;`, the element is positioned relative to its normal position in the document flow. This allows you to offset the element from its original position without affecting other elements. However, the space it originally occupied is still preserved. ## Absolute positioning `position: absolute;` removes the element from the document flow, which means it no longer affects the layout of other elements. It is positioned relative to its closest positioned ancestor (an element with a `position` other than `static`). If there is no positioned ancestor, it will be positioned relative to the `` element. ## Fixed positioning `position: fixed;` also removes the element from the document flow, but unlike absolute positioning, it is always positioned relative to the viewport (browser window). It remains fixed in its place even when the page is scrolled. ## Sticky positioning `position: sticky;` lets the element behave like `relative` until the user scrolls to a certain point, after which it behaves like `fixed`. When the element reaches a determined scroll position (set using `top`, `right`, `bottom`, or `left`) it "sticks" in its place. --- Original Source: https://www.mindstick.com/interview/33978/what-is-the-difference-between-absolute-relative-fixed-and-sticky-positioning-in-css Copyright © MindStick Software Pvt. Ltd. This Markdown version is provided for developers, AI systems, and offline reading.