Абсолютных позиционированный элемент не выше других абсолютных расположенные элементов в Safari IOS,

Question

У меня есть таблица с выпадающими

DropDown и заголовком таблицы является абсолютными расположением.

Выпадающий список имеет «z-index: 20» Заголовок имеет «z-index: 10» «Верхний» и «левый» свойства выпадающего меню заданы в коде.

здесь стайлинг выпадающего меню и заголовок

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

Dropdown должен быть выше заголовок таблицы.

Проблема появляется только в Safari на устройствах iOS - выпадающий список находится под заголовком. Кто-нибудь знает, как решить эту проблему?

Answer 1

Я узнал, что была проблема. Это было из-за сложной компоновки с стилями партии.

Снимок фактически был визуализирован, но часть раскрывающегося списка была невидимой (похоже, поскольку она перекрывалась другими div-блоками), но пользователь все еще мог взаимодействовать с этой невидимой частью.

Проблема заключалась в том, что один из внешних родительских div-контейнеров имеет свойство -webkit-overflow-scrolling: touch; Так что пока рендеринг Webkit в Safari скрыл часть выпадающего списка. Поэтому я удаляю это свойство, но left -webkit-transform: 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; 
}