绝对定位的元素不高于在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-overflow-scrolling：touch; 所以虽然渲染Safari中的Webkit隐藏部分下拉菜单。所以我删除该属性，但左-webkit转换：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; 
}