Can someone please explain the positions, absolute and relative? I searched on YouTube, but I get confused while writing code. I don’t precisely know when to use which and when to change the ancestor’s position also.
Please help me.
1 Like
visit this site for more explanation.
1 Like
Here’s a useful article with illustrative examples:
1 Like
A relative positioned element can be moved to any direction by using the properties(offset properties) such as left, right, top and bottom. And the values provided in those properties is calculated based on the position where the element sits. And the surrounding elements of a relative positioned element is aware of its existence in the document flow. So, they don’t consume the space of the relative positioned element after it has been moved to a different position on the page.
In absolute positioned element, it is the opposite. The surrounding elements consume the space of the absolute positioned element cause they assume that the absolute positioned element do not exist in the document flow. And an absolute positioned element can be moved in a same way you’d move a relative positioned element using properties (offset properties) such as left, right, top and bottom, but the values provided in those properties are calculated based upon its closest ancestor’s container that has a relative position, meaning if the parent of the absolute positioned element has “position: relative”, then giving the absolute positioned child a value of “top: 0px” will move the child towards the top border of the relative positioned ancestor. If no ancestor has a relative position. Then the absolute positioned element will make the body element its relative positioned ancestor. And use the body element as its container.
3 Likes
In CSS, absolute and relative positioning are two commonly used ways to position elements on a web page.
Relative Positioning: Relative positioning refers to positioning an element relative to its default position on the page. When an element is positioned relatively, it will still take up space in the normal flow of the page, but it can be shifted in any direction (up, down, left, right) from its original position. This shift does not affect the position of any other elements on the page. You can use the CSS property position: relative to apply relative positioning.
Absolute Positioning: Absolute positioning refers to positioning an element relative to its nearest positioned ancestor (i.e. the nearest parent element with a position value of relative, absolute, or fixed). When an element is positioned absolutely, it is completely removed from the normal flow of the page, and its position is defined by its distance from the nearest positioned ancestor. Other elements on the page will ignore the absolutely positioned element, and may overlap or be overlapped by it. You can use the CSS property position: absolute to apply absolute positioning.
In summary, relative positioning moves an element relative to its default position on the page, while absolute positioning moves an element relative to its nearest positioned ancestor.
5 Likes
Thank you so much for explaining it in so simple words. I understood it now. I will practice this to get more comfortable.
Thank you so much brother for the detailed explanation. I got it now. Thanks.
This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.