绝对定位元素不在 Safari iOS 中的其他绝对定位元素之上

Question

我有一个带有下拉列表的表格

表格的下拉菜单和表头是绝对定位的。

下拉菜单有“z-index: 20” 标题有“z-index：10” 下拉菜单的“top”和“left”属性在代码中设置。

这里是下拉列表和标题的样式

.data-table-head {
    overflow: hidden;
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    flex: 0 0 auto;
    height: 24px;
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    z-index: 12;
}  

 .custom-select-list {
        position: absolute;
        margin: 34px 0 0 0;
        min-width: 84px;
        font-weight: normal;
        right: 15px;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translateZ(1px);
        z-index: 10000;
 }

下拉菜单应位于表格标题上方。

该问题仅出现在 iOS 设备上的 Safari 中 - 下拉菜单位于标题下方。 有谁知道如何解决这个问题？

Answer 1

我发现了问题所在。这是因为布局复杂，样式多。

实际上已经渲染了下拉菜单，但是下拉菜单的一部分是不可见的（好像它被其他 div 块重叠了），但用户仍然可以与该不可见部分进行交互。

问题是外部父 div 容器之一具有属性 -webkit-溢出滚动：触摸； 因此，在 Safari 中渲染 Webkit 时隐藏了部分下拉菜单。所以我删除了该属性，但留下了 -webkit-transform: translate3d(0, 0, 0);到下拉菜单，一切都开始运转良好！

Answer 2

我认为您在下拉菜单中同时使用了 z-index 和 translate3d。所以，当你使用 translate3d 时，z-index 就不能再考虑了。

试试下面，

.data-table-head {
    overflow: hidden;
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    flex: 0 0 auto;
    height: 24px;
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    z-index: 12;
}  

 .custom-select-list {
        position: absolute;
        margin: 34px 0 0 0;
        min-width: 84px;
        font-weight: normal;
        right: 15px;
        z-index: 10000;
 }