I am building a Ferris wheel and on step 7 wheel and line classes are positioned absolute. I wanted to know if both wheel and span are being positioned relatively to html body because its being said that absolute elements are positioned as per the html body position if there is not other parent whose position is relative .When you give top and left 50 % how the line comes to the center of the wheel.Wheel’s left and top margin are not same so if span is being positioned as per the wheel position only then it can come to center and that also mean line is being positioned relatively to wheel. Please help me to understand exactly how these elements are actually working.
Any nested element that has a position of absolute and doesn’t have any of its ancestors a position of relative, the nested element will use the body element as a reference to position itself.
It is positioned relative to its closest positioned ancestor, or its initial containing block.
absoluteThe element is removed from the normal document flow, and no space is created for the element in the page layout. It is positioned relative to its closest positioned ancestor, if any; otherwise, it is placed relative to the initial containing block. Its final position is determined by the values of
top,right,bottom, andleft.
The reason you usually use position relative for the parent container is just that that doesn’t mess with the container’s position and interaction with other elements (unlike absolute).
I agreed with you.But could you please explain how line is coming exactly to center of wheel when you put top and left 50% .It look like line is being positioned relatively to wheel. Please give a look to html /css and then explain how line element is being placed and in respect to what element.
I agreed with you.But could you please explain how line is coming exactly to center of wheel when you put top and left 50% . It look like line is being positioned relatively to wheel. Please give a look to html and css and then explain how line element is being placed and in respect to what element…
Yes you’re right. The line is being positioned to wheel because wheel has a position of absolute. For an absolutely positioned child element to find its reference all it needs is to look for the closest ancestor that has been positioned with any of these values: relative, absolute, fixed and sticky. However, a value like static or no value at all will make the body its reference.
Pretty sure I already explained it. Please read what was posted including the MDN explanation.
It is positioned relative to its closest positioned ancestor
A positioned element is any element with a position other than the default static position. The wheel element is a positioned element.
I miss-understood some other article that element positioned absolute look for an element that is positioned relative and if it doesn’t find any element with position relative then it refer to body element. But now its clear that child element positioned absolute look for closest ancestor that has position (relative, absolute, sticky or fixed)Thank you so much for getting back to me.
I miss-understood some other article that element positioned absolute look for an element that is positioned relative and if it doesn’t find any element with position relative then it refer to body element. But now its clear that child element positioned absolute look for closest ancestor that has position (relative, absolute, sticky or fixed)Thank you so much Rajat for detailed explanation.
I too had the same issue as you cause most of the articles would only mention the position “relative” (but MDN’s documentation on CSS is the right one) when it comes to the parent container. And to overcome this I did some more research and tried implementing what I learned to consolidate my knowledge.
Anyways, it’s good to know that the information was useful. 
1 Like
This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.