带粘性列的表格中绝对定位popover被遮挡问题求助

问题场景 #

表格首列设置了sticky粘性定位，其中表头单元格内的popover弹窗被同列下方的粘性单元格遮挡，即使给popover设置z-index:2也无法解决。

问题原因 #

所有粘性单元格（首列的th和td）都设置了z-index:1，它们处于同一个堆叠上下文中。popover作为粘性单元格的子元素，其z-index仅在父元素的堆叠上下文内生效，无法突破其他同级粘性单元格的层级。

解决方案 #

给包含popover的那个粘性单元格（此处为表头第一个th）设置更高的z-index值，让它的堆叠层级高于同列其他粘性单元格，内部的popover就能完整显示。

修改后的代码 #

CSS 代码

body {
    color: white;
    background: rgb(24, 119, 119);
}

.anchor {
    position: relative;
}

.popover {
    position: absolute;
    background: white;
    color: black;
    padding: 5px;
    z-index: 2;
}

table tr th,
table tr td {
    background: blue;
}

table tr th:first-child,
table tr td:first-child {
    position: sticky;
    z-index: 1;
    left: 0;
}

/* 新增：提升包含popover的粘性表头层级 */
table tr th:first-child {
    z-index: 2;
}

HTML 代码

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <title>Page Title</title>
        <meta name="viewport" content="width=device-width, initial-scale=1" />
    </head>
    <body>
        <table>
            <tr>
                <th>
                    <div class="anchor">
                        1
                        <div class="popover">2</div>
                    </div>
                </th>
                <th>2</th>
                <th>3</th>
                <th>4</th>
                <th>5</th>
            </tr>
            <tr>
                <td>1</td>
                <td>2</td>
                <td>3</td>
                <td>4</td>
                <td>5</td>
            </tr>
            <tr>
                <td>1</td>
                <td>2</td>
                <td>3</td>
                <td>4</td>
                <td>5</td>
            </tr>
            <tr>
                <td>1</td>
                <td>2</td>
                <td>3</td>
                <td>4</td>
                <td>5</td>
            </tr>
            <tr>
                <td>1</td>
                <td>2</td>
                <td>3</td>
                <td>4</td>
                <td>5</td>
            </tr>
        </table>
    </body>
</html>

补充说明 #

如果需要动态控制popover的显示/隐藏，可在弹窗显示时给对应粘性单元格添加临时类提升z-index，隐藏时移除该类，避免影响其他交互逻辑。

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