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

Question

我有一个 table 带有下拉菜单

table 的下拉菜单和 header 是 absolute-positioned。

下拉菜单有 "z-index: 20" Header 有 "z-index: 10" "top" 和 "left" 下拉菜单的属性在代码中设置。

这里是下拉菜单的样式 header

.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;
 }

下拉菜单应位于 table header 上方。

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

Answer 1

我认为您在下拉菜单中同时使用了 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;
 }

Answer 2

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

下拉菜单确实被渲染了，但是下拉菜单的一部分是不可见的（看起来像是被其他 div-blocks 重叠了）但是用户仍然可以与那个不可见的部分进行交互。

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

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

Absolute positioned element is not above other absolute positioned elements in Safari iOS

html

css

css-position

mobile-safari

absolute