I’m working with a scrollable table in HTML using Tailwind CSS and facing an issue with a dropdown menu within the table. I need the dropdown to overflow the table’s boundaries and stay aligned with its trigger button, even when the table is scrolled. I’ve tried using position: absolute and position: fixed for the dropdown, but neither approach worked well. The dropdown gets clipped with position: absolute by the table’s overflow, and with position: fixed, the dropdown doesn’t stay aligned with the trigger button upon scrolling.

Here’s a simplified example of my setup: https://play.tailwindcss.com/SKTA0Jb2w5

Is there a pure CSS solution that allows the dropdown to overflow the scrollable area and align correctly with its trigger during scroll events, or is JavaScript necessary to adjust the positioning dynamically?