Сложная проблема z-index с мобильным меню и анимированным контентом

Question

На моем сайте есть проблема z-index, когда содержание z-index ниже, хотя отображается на выше меню (z-index: 4;) в мобильных браузерах / браузерах с измененным размером (изменяйте размер по горизонтали до горизонтального выравнивания изображений)с мобильным меню). Вот причина, связанная с этим CSS:

• Анимация CSS не может произойти без сгенерированного CSS content, поэтому мне пришлось добавить элемент div в качестве родительского для изображений.
• div, используемый для анимации, мешает программе просмотра изображений, и JavaScript обнаруживает щелчок или нажатие event.target как div вместо изображения.
• Добавление position: relative; z-index: 1; разрешает эта проблема и позволяет щелкать / касаться изображений и просматривать их в средстве просмотра изображений, хотя и создает проблему для этого сообщения .
• На мобильных устройствах эти изображения неправильно отображаются ближе к пользователю. чем меню, несмотря на то, что ul для меню имеет z-index: 4; и использует position: fixed;.

То, что я пробовал до сих пор:

• Я пытался изменить различные значения position, сохраняя текущий макет без какой-либо удачи.
• Использование z-index: 4 !important; не влияет на меню.
• Установка z-index: 0; или недопустимые / более низкие значения для изображений вСодержимое приводит к event.target нажатию / нажатию, чтобы вернуться к родительскому элементу div (необходим для анимации).
• Гарантируется, что другие элементы и сгенерировали элементы CSSне имеют конфликтующих пар свойство / значение, таких как position и z-index.

Эта проблема возникает в Waterfox, Chrome и Safari. Я довольно озадачен, учитывая, что relative уделяется меньше внимания, чем fixed плюс , что более высокие значения z-index не соблюдаются ... всеми браузерами ... одновременно. Я все еще решаю проблему, хотя в этот момент я действительно могу использовать второе мнение.

Это временный URL, не предназначенный для индексации поисковыми системами: https://www.johnbilicki.com/eridel/

Мысли, пожалуйста?

Answer 1

Хорошо, поэтому для начинающих, особенно если вы собираетесь продавать его как услугу, я настоятельно рекомендую узнать больше о естественной семантической структуре и DOM Flow , поскольку у вас естьВаша структура элементов довольно запутана. В качестве быстрого примера можно привести порядок main над header элементами и приемы, которые вы используете для визуального позиционирования вещей, которые не понадобятся, если у вас есть естественный поток DOM (который также сократит ваш CSS / html вчасть того, что есть, и повышают производительность, когда сайт «рисуют» / рендерит, и вам не нужно явно определять z-index или сталкиваться с таким количеством кросс-браузерных проблем и тому подобное, например, ваша CMS выглядит намного чище?

Однако, быстрое решение вашей текущей дилеммы. Просто удалите z-index: 0 из вашего селектора CSS body > header и вуаля, вы вернулись на правильный путь. Надеюсь, это поможет, ура!