Почему z-index модалки не перекрывает header?

Question

[jeruthadam]

Как это починить?

Модалка открывается кнопкой Create account.
Для большей наглядности, прокрутите немного страницу вниз, чтоб header стал непрозрачным. Потом если открыть модалку, то видно, что модалка не перекрывает header. При этом у модалки z-index: 999, а у header z-index: 2

Почему так происходит и что сделать можно? mindless-quince.surge.sh

Comments

[Максим Тимофеев]

а где там модалка? Вы или спамите или укажите подробно где что нажать. Как то нет делания по всем кнопкам подряд жать, что бы понять где модалка

[jeruthadam]

Максим Тимофеев: Ты читать не умеешь? Второе предложение.

[Максим Тимофеев]

jeruthadam:

Потом если открыть модалку

там есть кнопка "открыть модалку"?

Answer 1

[0xD34F]

Вам бы про контекст наложения почитать, станет понятнее, как работает z-index.

А что конкретно можно сделать с вашим окном... можно поднять его выше в DOM-дереве, поставьте .modal-overlay на один уровень с .content, например (правда, после этого центрирование кнопки отваливается, но уверен, поправить не проблема).

Comments

[jeruthadam]

Дело в том, что это вообще компонент, изначально не присутсвующий в ДОМ. Он появляется только при клике.

[jeruthadam]

Поэтому я не представляю как его подимать выше, если этот компонент вызывается внутри другого

[0xD34F]

А можно как-то отследить открытие/закрытие окна и переопределять z-index у .hero-content? Типа: открыли - сделали 3, закрыли - вернули 1.

[jeruthadam]

0xD34F: можно. но это несколько костыльно :)

[jeruthadam]

В целом я так погнял альтернатив нет. Если правильно, то модалку надо выносить вверх по хтмл дереву. Спс за ссылку.

Answer 2

[maxfox]

Если .hero-content поставить z-index: 3, то все работает. А вообще, модалку лучше в корень документа ставить. Ну или как можно выше..
Если не секрет, то на чем это сделано? Почему такой кошмарный CSS? Селеторы по data-атрибутам? Серьезно?

Comments

[jeruthadam]

Это scoped css. Селекторы для компьютера, не для человека. В соурсах компоненты. Не надо юзать БЭМ и тд.

[jeruthadam]

Если я пставлю херо контенту 3, то хедер перебивается при скролле. Он становится прозрачным. не катит.

[maxfox]

jeruthadam: Понятно. Я смотрю, вам это помогло.. :) Без обид, но в браузере такое отлаживать невозможно.

[jeruthadam]

Это только в браузере и отлаживать, где еще?

[maxfox]

Ну тогда ставьте модалку выше по DOM-дереву. Вы поймите, что элемент не выскочит из своего родителя, если у родителя position relative, absolute или fixed. Потому как у родителя z-index меньше, чем у header, то header будет перекрывать вашу модалку.

Answer 3

[Astrohas]

<div class="container-fluid hero-wrapper" data-v-0a101ff6="" style="
    z-index: 5;
">

Comments

[jeruthadam]

Тогда хедер исчезает. Вы сами пробовали?