Placement of a popup over table that has overflow with CSS - css

Question

I've been trying to figure out for awhile but I've not come to a solution. My issue is how to properly display a popup over a table which has a fixed height that has vertical overflow. I have a button that when hovered over displays a div that contains action links. Before the table scrolls (so at the top of the table) the div appears right below the button, where I want it to. But when you start scrolling the div starts to wander down the page.
This is a sample of the code that I am using
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
font-family: Verdana;
background-color: #f6f6f6;
display: flex;
flex-direction: column;
min-height: 100vh;
}
table {
border-collapse: collapse;
width: 100%;
}
table tr:nth-of-type(even) {
background-color: #d4d4d4;
}
table tr:nth-of-type(odd) {
background-color: #E8E6E6;
}
table tr:hover {
background-color: #D0D9DD;
}
th,
td {
padding: 8px 16px;
border: 1px solid #ccc;
}
th {
color: rgb(255, 255, 255);
background: #65A0E5;
position: sticky;
top: 0;
z-index: 2;
padding: 15px;
}
.TableContainer {
display: flex;
justify-content: center;
}
.Table_Center {
width: 500px;
height: 300px;
overflow-y: auto;
}
.ActionDropdown {
display: inline-block;
}
.ActionButton {
background-color: #4CAF50;
color: white;
padding: 16px;
font-size: 16px;
border: none;
cursor: pointer;
}
.ActionButton-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 2;
}
.ActionButton-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.ActionButton-content a:hover {
background-color: #f1f1f1
}
.ActionDropdown:hover .ActionButton-content {
display: block;
}
.ActionDropdown:hover .ActionButton {
background-color: #3e8e41;
}
<div class="TableContainer">
<div class="Table_Center">
<table>
<thead>
<tr>
<th>
File Name
</th>
<th>
Action
</th>
</tr>
</thead>
<tbody>
<tr>
<td>Item 1</td>
<td>
<div class="ActionDropdown">
<button class="ActionButton">Action</button>
<div class="ActionButton-content">
<a>Test 1</a>
<a>Test 2</a>
<a>Test 3</a>
</div>
</div>
</td>
</tr>
<tr>
<td>Item 1</td>
<td>
<div class="ActionDropdown">
<button class="ActionButton">Action</button>
<div class="ActionButton-content">
<a>Test 1</a>
<a>Test 2</a>
<a>Test 3</a>
</div>
</div>
</td>
</tr>
<tr>
<td>Item 1</td>
<td>
<div class="ActionDropdown">
<button class="ActionButton">Action</button>
<div class="ActionButton-content">
<a>Test 1</a>
<a>Test 2</a>
<a>Test 3</a>
</div>
</div>
</td>
</tr>
<tr>
<td>Item 1</td>
<td>
<div class="ActionDropdown">
<button class="ActionButton">Action</button>
<div class="ActionButton-content">
<a>Test 1</a>
<a>Test 2</a>
<a>Test 3</a>
</div>
</div>
</td>
</tr>
<tr>
<td>Item 1</td>
<td>
<div class="ActionDropdown">
<button class="ActionButton">Action</button>
<div class="ActionButton-content">
<a>Test 1</a>
<a>Test 2</a>
<a>Test 3</a>
</div>
</div>
</td>
</tr>
<tr>
<td>Item 1</td>
<td>
<div class="ActionDropdown">
<button class="ActionButton">Action</button>
<div class="ActionButton-content">
<a>Test 1</a>
<a>Test 2</a>
<a>Test 3</a>
</div>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
I'd like to understand what exactly dictates the placements of these divs and how the overflow of the table factors into that. When I remove the overflow the popups appear right below the buttons as I want them to. If I set the position of the ActionDropdown class to relative then the divs appear below the buttons as I want, but now it messes up the overflow. The popups don't appear above the scroll in the sense that if you hover over the button at the bottom of the table it will expand the area at the bottom of the Table_Center container so that now you have to scroll down to see the popup.
What I'm aiming for is for the popups to be displayed below the buttons but independent of the scrolling. I'm new to front-end development so my explanations may be poor and I apologize in advance.