如何实现表格悬停弹出层完全显示在最上层且无需使用JavaScript

弹出层被裁剪的根本原因是：absolute定位的弹出层以设置了position: relative的.details为定位上下文，而.details位于设置了overflow: auto的.container内部，超出容器边界的内容会被强制裁剪。我们只需修改弹出层的定位规则，让其不受父容器overflow属性限制即可，无需JS。

修改步骤 #

• 移除.details的position: relative属性，不再将其作为弹出层的定位上下文
• 将弹出层.details div的定位从position: absolute改为position: fixed，同时删除原有top: 0配置：fixed定位的元素如果不设置top/right/bottom/left属性，初始位置会和其在普通文档流中的默认位置完全一致，配合原有transform偏移即可保持弹出层和触发单元格的相对位置不变
• 适当调高弹出层的z-index值，确保其始终显示在所有元素上层

修改后的完整CSS代码 #

/* 移除了position: relative属性 */
.details {
}

.details div {
    --bgcolor: #ffecec;
    --bdcolor: 2px solid #de8273;
    /* 将absolute改为fixed */
    position: fixed;
    /* 删除了原有的top: 0属性 */
    transform: translateX(-125%) translateY(-7%);
    display: none;
    background: var(--bgcolor);
    /* 调高z-index确保层级最高 */
    z-index: 999;
    padding: 1rem;
    border: var(--bdcolor);
    width: 150px;
    border-radius: 5px;
    box-shadow: 1px 1px 2px 2px #a08c8c;
}
.details div:after{
    content: '';
    position: absolute;
    width: 7px;
    height: 7px;
    border-bottom: var(--bdcolor);
    border-right: var(--bdcolor);
    background: var(--bgcolor);
    left: 98.5%;
    transform: rotate(315deg);
    top: 10px;
}
.details:hover div {
  display: inline;
}
.tab{
    border-collapse : collapse;
    width : 100%;
    }
.tab td{
     padding: 3px;
      font-size: 14px;
    }

.tab tr:hover td{
    background:#20b5cc1f;
}

.tab th{
     padding: 4px;
    font-weight: normal;
    border: 1px solid black; 
     }
.tab tr:nth-child(even) {
    background-color: #f2f2f2;
    }
.tab tr:nth-child(odd) {
    background-color: yellow;
    }
.container{
    border: 2px solid blue;
    padding: 4px;
    width: 500px;
    margin: 0 auto;
    overflow: auto;
    height: 200px;
}

效果验证 #

• .container的overflow: auto属性保留，表格超出高度时依然可以正常滚动，不会溢出容器边界
• 弹出层改为fixed定位后，定位上下文为浏览器视口，完全不受父容器overflow属性的裁剪限制，可以完整展示
• 全程无需任何JS代码，纯CSS实现需求

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