絕對定位的元素不高於在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; 
}