Bring a menu inside a table cell over top the entire table?

Hi all.

So I’m currently looking at a table. In the top table header row are sorting arrows. These arrows, when you click on them, opens a menu that allows the user to decide what direction they want to sort in. (this is what design wants, if it were up to me I’d scrap the menu altogether)

I have the html and css and js together to make the icon appear, and for the menu to open when you click the arrow, that was all fine.

But then the part about making the menu open over top the rest of the table.

I have position relative set on the icon button that the user clicks on, so I can then position the window that opens based on where this icon is. The opened window is position absolute. But z-index on this window does not work. If I understand correctly, it will stack correctly within all the contents inside the position relative parent, but that parent is inside the table…

Anyone have any ideas on how i can get this thing to display over top of everything else in the page? Thanks!!!

Also in #CSS _↴