Имейте два HTML-элемента полной ширины, но оба будут интерактивными

Question

У меня есть дизайн, который требует, чтобы разделы были на всю ширину страницы, но содержимое находится внутри контейнера (article). Имея это в виду, существует потребность в стороне, которая плавает над полными разделами, которая должна быть интерактивной (aside).

И article, и side имеют контент, с которым необходимо взаимодействовать. Проблема в том, что один должен иметь приоритет над другим, и на данный момент я согласился на article, но это не идеально.

https://jsfiddle.net/WolfieZero/aouu1v40/3/

Есть идеи? Я хотел посмотреть, можно ли сначала это исправить с помощью CSS, но подумал, что это может быть работа для JS (в данном случае jQuery).

Спасибо.

Answer 1

Вам просто нужно переключить z-индексы, теперь ссылки в обеих областях будут кликабельными.

.module {
    z-index: 2;
}
section > div {
    z-index: 1;
}

Раньше вы устанавливали приоритеты для "раздела", так что, хотя "модуль" показалось сверху (из-за его свойств позиционирования), его z-индекс означал, что он фактически не был доступен.

См. https://jsfiddle.net/aouu1v40/6/ для демонстрации