#css #ios #safari #css-position #z-index
#CSS #iOS #сафари #css-позиция #z-индекс
Вопрос:
У меня есть навигационная панель и нижний колонтитул. Они оба fixed расположены, и у обоих есть z-index 1 .
Внутренний div должен быть выше их обоих. У него есть fixed положение, ширина и высота 100vw и 100vh соответственно, и это z-index есть 2 .
Отлично работает в Chrome и Firefox. Тем не менее, по какой-то причине Safari представляет навигационную панель и нижний колонтитул над DIV. Почему? Почему Safari-это новый Internet Explorer? XD
Есть идеи, как это решить?
Хром: (правильно)
iOS: (глючит)
напр.
lt;htmlgt; lt;stylegt; html, body { margin: 0; } nav, footer, .overlay { position: fixed; width: 100vw; } nav, footer { z-index: 1; background-color: lightgreen; padding: 10px; } nav { top: 0; } footer { bottom: 0; } .overlay { z-index: 2; background-color: lightsalmon; height: 100vh; top: 0; left: 0; } lt;/stylegt; lt;bodygt; lt;navgt;NAVlt;/navgt; lt;divgt; lt;div class="overlay"gt; DIV lt;/divgt; lt;/divgt; lt;footergt;FOOTERlt;/footergt; lt;/bodygt; lt;/htmlgt; Комментарии:
1. Код CSS отсутствует.
2. @lukas.j подумал, что это совершенно очевидно. отредактировал фрагмент кода с минимальным использованием css.
3. Минимального CSS недостаточно.
4. Пожалуйста, не могли бы вы проверить свой код, потому что это нелегальный HTML. Почему навигационного элемента нет в теле? Почему нижний колонтитул также находится вне тела?
5. @Ахаворт, ты прав. Отредактировано с надлежащим полным минимальным примером.