html - Safari iOS 中绝对定位元素不高于其他绝对定位元素

Question

我有一个带有下拉菜单的表格

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

下拉菜单的“z-index:20” header 具有“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 block 重叠)，但用户仍然可以与该不可见部分进行交互。

问题是外部父 div 容器之一具有属性 -webkit-overflow-scrolling:触摸； 因此，在 Safari 中渲染 Webkit 时隐藏了下拉菜单的一部分。所以我删除了该属性，但保留了 -webkit-transform:translate3d(0, 0, 0);到下拉菜单，一切开始工作得很好!