Menu
Could someone explain the reason why a position: absolute; can only be positioned in relation to its nearest non - position: static; parent?
What is the reason the element can not be positioned in relation to its position: static; parent?
642
In position: relative , the element is positioned relative to itself. However, an absolutely positioned element is relative to its parent. An element with position: absolute is removed from the normal document flow. It is positioned automatically to the starting point (top-left corner) of its parent element.
An element with position: absolute; is positioned relative to the nearest positioned ancestor (instead of positioned relative to the viewport, like fixed). However; if an absolute positioned element has no positioned ancestors, it uses the document body, and moves along with page scrolling.
Clearly, nothing can be absolute and relative at the same time. Either you want the element to position itself based on another ancestor's position or based on the page flow.
The absolutely positioned element is positioned relative to its nearest positioned ancestor (i.e., the nearest ancestor that is not static ).
I believe that the reasoning behind this is so that you can position absolute elements relative to elements that are not just that element's direct parent. Since position: static is the default, it makes sense to have it be the determining factor on whether the element should position itself relative to that parent.
For example, I could use the following html to position an element relative to its grandparent:
<div id="grandparent" style="position:relative">
<div id="parent">
<div id="child" style="position:absolute;top:0">
</div>
</div>
</div>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
