What is the Difference between the positions Realtive and Absolute

The main difference between position: relative and position: absolute is how they are positioned in relation to their parent container and the other elements on the page.

When an element has a position: relative, it is positioned relative to its normal position, and you can use the top, right, bottom, and left properties to move it away from that normal position. The element will still take up space in the normal flow of the document and affect other elements as if it were still in its normal position.
When an element has a position: absolute, it is taken out of the normal flow of the document and positioned relative to its nearest positioned ancestor (or the body if none is found), if no positioned ancestor is found, the element will be positioned relative to the initial containing block (usually the body itself). The element will not affect other elements on the page and will not take up any space.

In summary, position: relative is used to creating an offset from an element's default position, whereas position: absolute is used to create an element that is taken out of the normal flow of the document and is positioned relative to its nearest positioned ancestor.

Subscribe to my newsletter

Read articles from Preeti samuel directly inside your inbox. Subscribe to the newsletter, and don't miss out.

Written by

Preeti samuel

I am Kamilla Preeti Samuel, a Fullstack Developer with a strong command of JavaScript, Node.js, MongoDB, MySQL, CSS, and HTML. Over the years, I have built and worked on a range of applications, gaining valuable hands-on experience in both backend and frontend development. My professional journey includes working as a Junior Software Engineer at Bytestrum, where I focused on software development, and at NUK9 as a UX and UI Designer, contributing to creating user-centered design solutions. I thrive on building efficient, scalable, and user-friendly applications, combining technical expertise with a keen eye for design. I enjoy collaborating with cross-functional teams to create seamless digital experiences, and I am passionate about continuously exploring new tools and frameworks to stay ahead in the fast-evolving tech landscape. I am Kamilla Preeti Samuel, a full-stack developer with a strong command of JavaScript, Node.js, MongoDB, MySQL, CSS, and HTML. Over the years, I have built and worked on various applications, gaining valuable hands-on experience in both backend and frontend development. My professional journey includes working as a Junior Software Engineer at Bytestrum, where I focused on software development, and at NUK9 as a UX and UI Designer, contributing to creating user-centered design solutions. I thrive on building efficient, scalable, and user-friendly applications, combining technical expertise with a keen eye for design. I enjoy collaborating with cross-functional teams to create seamless digital experiences, and I am passionate about continuously exploring new tools and frameworks to stay ahead in the fast-evolving tech landscape.