--- title: "difference between position: relative; and position: absolute; in CSS?" description: "difference between position: relative; and position: absolute; in CSS?" author: "Ashutosh Patel" published: 2024-10-28 updated: 2024-10-28 canonical: https://www.mindstick.com/interview/33985/difference-between-position-relative-and-position-absolute-in-css category: "css-css3" tags: ["css-css3", "css", "css position", "css styling"] reading_time: 2 minutes --- # difference between position: relative; and position: absolute; in CSS? `position: relative;` positions an element relative to its normal position in the document flow. It does not affect the layout of surrounding elements, but it can be moved using the top, right, bottom, or left properties. However, the element still occupies its original position in the flow. `position: absolute;` removes the element from the normal document flow and positions it relative to its closest positioned ancestor (an ancestor element with a position other than static). If no such ancestor exists, it will be positioned relative to the initial containing block (usually the element). ## Interaction - A **relatively** positioned element will affect the layout of other elements as it remains in the document flow. - An **absolutely** positioned element will overlap other elements without pushing them apart as it is moved out of the flow. ## Example- ```css .relative-box { position: relative; top: 20px; left: 10px; } .absolute-box { position: absolute; top: 50px; left: 100px; } ``` **Also, Read:** [How can you center an element horizontally in CSS?](https://www.mindstick.com/interview/33975/how-can-you-center-an-element-horizontally-in-css) ## Answers ### Answer by Ashutosh Patel `position: relative;` positions an element relative to its normal position in the document flow. It does not affect the layout of surrounding elements, but it can be moved using the top, right, bottom, or left properties. However, the element still occupies its original position in the flow. `position: absolute;` removes the element from the normal document flow and positions it relative to its closest positioned ancestor (an ancestor element with a position other than static). If no such ancestor exists, it will be positioned relative to the initial containing block (usually the element). ## Interaction - A **relatively** positioned element will affect the layout of other elements as it remains in the document flow. - An **absolutely** positioned element will overlap other elements without pushing them apart as it is moved out of the flow. ## Example- ```css .relative-box { position: relative; top: 20px; left: 10px; } .absolute-box { position: absolute; top: 50px; left: 100px; } ``` **Also, Read:** [How can you center an element horizontally in CSS?](https://www.mindstick.com/interview/33975/how-can-you-center-an-element-horizontally-in-css) --- Original Source: https://www.mindstick.com/interview/33985/difference-between-position-relative-and-position-absolute-in-css Copyright © MindStick Software Pvt. Ltd. This Markdown version is provided for developers, AI systems, and offline reading.