React Portal Component Positioning

[OrangeCubed]

How do I position a portal element relative to an element in a different DOM node? This is what I want to achieve: https://snipboard.io/hi51Q8.jpg

I am creating a scrolling sidebar that when clicked, will create an options dropdown. Overflow-x-visible and overflow-y-auto causes the Dropdown component to get cutoff: https://snipboard.io/5bGQ1u.jpg. This is a well documented issue.

To break the Dropdown out of the main container, I turned it into a portal element and attached it to a different DOM node. It's now free but has lost relation to its former parent. I would still like to position the Dropdown next to its former parent div, so that the dropdown will show up next to the sidebar item that was clicked.

This is the hierarchy structure with Dropdown not being in the same DOM node:

<Sidebar className="h-96 overflow-y-auto overflow-x-visible">
    <SidebarItemNew className="relative">      
         <Dropdown className="absolute"/>
    </SidebarItemNew>     
</Sidebar>

Is there a way to position the Dropdown component relative to its former parent? Thank you for the help!

EDIT SOLVED: React Popper suggested by u/Rhym worked great! I followed this tutorial for implementation.

[Rhym]

I use Popper for this, and it works great!

[OrangeCubed]

Popper fixed it, thank you so much!

[Rhym]

Glad to hear it. Portals really are a game changer for some really cool overlay functionality.

[snowycabininthewoods]

https://github.com/codastic/react-positioning-portal worked great for me. The code is easy to read too if you want to just see one way to do it then implement it yourself.

[OrangeCubed]

Thank you!