Проблема позиционирования CSS только на мобильных устройствах - PullRequest
0 голосов
/ 06 февраля 2019

У меня неожиданная проблема с мобильными Safari и Chrome, которую я не могу воспроизвести на рабочем столе.Я изменил навигацию на фиксированную вверху, но обнаружил, что когда я прокручиваю вниз, нижний колонтитул скрывает навигацию в мобильном браузере.

Я записал пример, чтобы показать вам, что я имею в виду:

Что ожидается и работает в браузере рабочего стола (нижний колонтитул под навигацией): https://drive.google.com/open?id=1bmUMsfEpauuXx2Jhyf7l2YQrORj6E__z

Что происходит на мобильных устройствах Safari и Chrome на iPhone (нижний колонтитул находится в верхней части панели навигации): https://drive.google.com/open?id=1-ri1DqmWPY8hrUP4LaUr-aGpnfH3eVhC

Сайт доступен здесь: http://michaelespinosa.com/projects/eskimo/index.html

Здесьэто CSS для навигации:

  #eskimo-sidebar {
    position: fixed;
    top: 0;
    left: auto;
    right: auto;
    width: 100%;
    height: 200px;
    margin-bottom: 60px;
    z-index: 99;
  }

Вот CSS для нижнего колонтитула:

  #eskimo-sidebar {
    position: relative;
    background-color: red;
  }

Я чувствую, что, должно быть, упускаю что-то очевидное.Оцените помощь заранее.

1 Ответ

0 голосов
/ 07 февраля 2019

У вашего сайта много проблем, особенно на мобильных устройствах.Что касается упомянутой проблемы, попробуйте установить z-index: 10 (или 100) для элемента с eskimo-sidebar id.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...