Даже после установки правильного индекса z он не работает на сафари ipad.

Question

У меня действительно плохая ситуация. У меня есть свой пользовательский div, который я показываю на странице. Единственная проблема, с которой я сейчас сталкиваюсь, что она не работает на iPad. Оверлей охватывает всплывающее окно даже после того, как у меня есть соответствующий z-индекс для обоих элементов.

Эта проблема касается только сафари iPad. В другом браузере он работает нормально. Я нашел одно решение, когда мне нужно переключить свое всплывающее окно рядом или рядом с наложением DIV, который не является возможным для меня из-за связывания контекста knockout.js

Вопрос оснастке

здесь, как вы можете видеть Приложенное изображение, открытый каландр находится за оверлейным серым div.

Ниже приведена структура html, где higlited - контейнер каландра & на последнем оверлейном div.

Сообщите мне, если кто-то может предложить мне какую-нибудь полезную идею.

Answer 1

Кажется, что если ваш фиксированный элемент находится внутри другого фиксированного элемента с более низким индексом z, чем оверлей, он останется за ним, даже если сам элемент имеет более высокий индекс z. Таким образом, вы должны найти этот более высокий фиксированный элемент и изменить его z-index на что-то более высокое.

.overlay { 
 
    position: fixed; 
 
    top: 0; 
 
    left: 0; 
 
    right: 0; 
 
    bottom: 0; 
 
    background: rgba(0, 0, 0, 0.5); 
 
    z-index: 4; 
 
} 
 
.lower { 
 
    position: fixed; 
 
    z-index: 2 
 
} 
 
.popup { 
 
    position: fixed; 
 
    border: 1px solid black; 
 
    background: white; 
 
    height: 200px; 
 
    width: 200px; 
 
    z-index: 100; 
 
}

<div class="lower"> 
 
    <div class="popup"></div> 
 
</div> 
 
<div class="overlay"></div>