如何让悬浮菜单突破可滚动父容器的限制

我有一个可滚动表格，最右侧列包含一个悬浮菜单。目前的实现方式是将表格放入容器中，通过限制宽高，在表格超出尺寸时触发滚动条。

现在的问题是，由于悬浮菜单也处于可滚动容器内，有时无法正常显示：

我明白这正是overflow: scroll的预期效果，但想知道是否有替代方案，能让悬浮菜单“突破”父容器的限制且无需基于JavaScript的定位？

目前调研后似乎只有以下几种选择：

• 移除kebab菜单，或
• 为容器添加大量底部内边距，或
• 移除滚动功能

……但我希望能找到避免上述情况的方法。

根据建议，为菜单设置position: fixed后出现了新问题：当表格容器出现滚动条并滚动时，每行对应的菜单位置会呈指数级向下偏移（例如第四行的菜单位置比预期低四倍的垂直高度）。

以下是激活最后一行菜单时的情况：

表格容器无滚动条/未滚动 #

菜单显示正常：

表格容器有滚动条且已滚动 #

菜单位置远低于对应的行（注：为了让菜单能显示，已为body添加内边距，并降低容器max-height来模拟问题）：

代码示例 #

CSS

.SearchResultsGridContainer {
  padding: 1rem;
  width: fit-content;
  height: fit-content;
  max-width: 100%;
  border: 1px solid #333;
  background-color: #fee;
}
.SearchResultsGridContainer .SearchResultsGrid {
  max-height: 70vh;
  max-width: 100%;
  overflow: scroll;
  padding: 0 0.5rem 1rem 0;
  background-color: #dcc;
}
.SearchResultsGridContainer .SearchResultsGrid table {
  border-collapse: collapse;
  background-color: #fff;
}
.SearchResultsGridContainer .SearchResultsGrid table thead tr th {
  background-color: #aaa;
  position: sticky;
  top: 0;
  padding: 1rem;
}
.SearchResultsGridContainer .SearchResultsGrid table tbody tr td {
  padding: 1rem;
}
.SearchResultsGridContainer .SearchResultsGrid table tbody tr td.KebabMenu {
  border: 3px outset gray;
  text-align: center;
}
.SearchResultsGridContainer .SearchResultsGrid table tbody tr td.KebabMenu button {
  width: 2em;
  height: 2em;
}
.SearchResultsGridContainer .SearchResultsGrid table tbody tr td.KebabMenu ul {
  display: none;
}
.SearchResultsGridContainer .SearchResultsGrid table tbody tr td.KebabMenu:hover {
  position: relative;
}
.SearchResultsGridContainer .SearchResultsGrid table tbody tr td.KebabMenu:hover ul {
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  margin: 0;
  padding: 0;
  list-style-type: none;
  background-color: white;
  border: 1px solid black;
  box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.3);
  width: 10rem;
}
.SearchResultsGridContainer .SearchResultsGrid table tbody tr td.KebabMenu:hover ul li {
  margin: 0;
  padding: 0;
}
.SearchResultsGridContainer .SearchResultsGrid table tbody tr td.KebabMenu:hover ul li a {
  display: block;
  white-space: no-wrap;
  padding: 0.5rem;
}
.SearchResultsGridContainer .SearchResultsGrid table tbody tr td.KebabMenu:hover ul li a:hover {
  background-color: #eef;
}

HTML

<div class="SearchResultsGridContainer">
    <div class="SearchResultsGrid">
        <table role="table">
            <thead role="rowgroup">
                <tr>
                    <th role="columnheader">
                        Column header 01
                    </th>
                    <th role="columnheader">
                        Column header 02
                    </th>
                    <th role="columnheader">
                        Column header 03
                    </th>
                    <th role="columnheader">
                        Column header 04
                    </th>
                    <th>&nbsp;</th>
                </tr>
            </thead>
            <tbody role="rowgroup">
                <tr role="row">
                    <td>Row 01 Column 01</td>
                    <td>Row 01 Column 02</td>
                    <td>Row 01 Column 03</td>
                    <td>Row 01 Column 04</td>
                    <td class="KebabMenu">...
                        <ul>
                            <li><a href="#">Link 01</a></li>
                            <li><a href="#">Link 02</a></li>
                            <li><a href="#">Link 03</a></li>
                            <li><a href="#">Link 04</a></li>
                        </ul>
                    </td>
                </tr>
                <tr role="row">
                    <td>Row 02 Column 01</td>
                    <td>Row 02 Column 02</td>
                    <td>Row 02 Column 03</td>
                    <td>Row 02 Column 04</td>
                    <td class="KebabMenu">...
                        <ul>
                            <li><a href="#">Link 01</a></li>
                            <li><a href="#">Link 02</a></li>
                            <li><a href="#">Link 03</a></li>
                            <li><a href="#">Link 04</a></li>
                        </ul>
                    </td>
                </tr>
                <tr role="row">
                    <td>Row 03 Column 01</td>
                    <td>Row 03 Column 02</td>
                    <td>Row 03 Column 03</td>
                    <td>Row 03 Column 04</td>
                    <td class="KebabMenu">...
                        <ul>
                            <li><a href="#">Link 01</a></li>
                            <li><a href="#">Link 02</a></li>
                            <li><a href="#">Link 03</a></li>
                            <li><a href="#">Link 04</a></li>
                        </ul>
                    </td>
                </tr>
                <tr role="row">
                    <td>Row 04 Column 01</td>
                    <td>Row 04 Column 02</td>
                    <td>Row 04 Column 03</td>
                    <td>Row 04 Column 04</td>
                    <td class="KebabMenu">
                        ...
                        <ul>
                            <li><a href="#">Link 01</a></li>
                            <li><a href="#">Link 02</a></li>
                            <li><a href="#">Link 03</a></li>
                            <li><a href="#">Link 04</a></li>
                        </ul>
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
</div>

内容的提问来源于stack exchange，提问作者EvilDr