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

Question

我有一张下拉列表

桌子的下拉和标题是绝对定位的。

下拉有＆＃34; z-index：20＆＃34; 标题有＆＃34; z-index：10＆＃34; ＆＃34;顶部＆＃34;和＆＃34;左＆＃34;下拉列表的属性在代码中设置。

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

.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-transform：translate3d（0,0,0）;下拉，一切都开始变得很好！

Answer 2

我认为你正在使用z-index＆amp;你的下拉列表中的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;
 }