Nash Vail Nash Vail - 4 months ago 10
HTML Question

CSS absolute positioning, what is "non-statically positioned ancestor"?

So I have been following this tutorial, to get a more clear understanding of relative and absolute positioning . Most of the things are clear but towards the end of the article it says
about absolute positioning .


..it doesn’t always default to the top left of the browser window.
Instead, what position: absolute; really does is position the element
relative to its first non-statically-positioned ancestor (inherit
doesn’t count either)...


Can someone put that in layman's terms please.
Thanks

T J T J
Answer

not statically positioned element is an element having position property set to anything other than static (which is the default value).

For e.g: position: relative || absolute || fixed

If no such positioned ancestor is found, the absolute positioned element will be positioned relative to the window.