Почему не работает z-index в Safari?

Question

[denism300]

Есть сайт https://spbdialog.ru/
Проблема с меню в браузере safari в iPhone и iPad - не работает заданный для него z-index.
Если под виндой в консоли браузера включить режим эмуляции iphone - все ок, в Android устройствах - все ок.
Добавление свойства transform: translate3d(0 ,0, 10px); так же результата не дало.

Comments

[Brad9aga]

а ты не пробовал указать на проблему, или предлагаешь все z-index на сайте искать?

Answer 1

[Салават Салахутдинов]

возможно используете старый сафари (position: sticky пока еще не очень хорошо поддерживается браузерами). А вообще для полной кроссбраузерности в вашем случае лучше переделать шапку в position:fixed, а в body добавить отступ равный высоте этой шапки
https://caniuse.com/#search=sticky

Comments

[denism300]

Сафари свежий, актуальная на текущий момент версия.
И проблема не со stiсky, а с выпадающим меню.

[Салават Салахутдинов]

denism300, Там где position:sticky (класс sticky-top), поставьте z-index: 1000

[Салават Салахутдинов]

denism300, только что проверил и все работает, если поставить z-index: 1000 на контейнер (тот который position:sticky). Так происходит потому что z-index работает относительно контейнера у которого поставлен position:sticky (а не всего документа), а в этом контейнере вы не указали z-index и поэтому для него используется auto.

[denism300]

Салават Салахутдинов, да, так работает, спасибо