Place an absolute positioned element relative to its direct parent element

Question

Usually, an absolutely positioned element (position:absolute) is placed relatively to its closest positioned ancestor.

Now, I want to place that element relatively to its direct parent.

What I could obviously do, is:

• taking the parent
• checking whether it is already positioned
• if not, adding position: relative to it
• proceeding in positioning the element

I am pretty sure there must be a simpler solution, any ideas?

Answer 1

It looks like there are no easier solutions than make parent positioned

#parent {
   position: relative;
}

There are now other solutions (at least I can't found):

Position absolute but relative to parent

talkie talkie how it can be: https://discourse.wicg.io/t/position-an-element-relatively-to-another-element-from-anywhere-in-the-dom/968

All the same:

https://css-tricks.com/absolute-positioning-inside-relative-positioning/

https://internetingishard.com/html-and-css/advanced-positioning/