Почему не срабатывает z-index?

Question

[Влад]

пациент https://karedesign.ee/ru/product/mirror-sweet-home...

нажмите "В корзину", экран потемнеет.
Почему поле для ввода телефона недоступно? У него стоит zindex 30, а у темного фона 20 - но все равно поле недоступно..

Answer 1

[Антон Спирин]

Причина в относительном позиционировании .R-col с z-index: 20.
Поэтому безразлично сколько вы ставите z-index модальному окну, пока оно дочернее .R-col, оно всегда будет под .modal-blacktop пока z-index .modal-blacktop >= z-index .R-col
https://jsfiddle.net/ycyym828/

Comments

[Влад]

не понял?
для поля ввода телефона .modal-body стоит zindex 30
для заднего темного фона .modal-backdrop стоит zindex 20

что неправильно?

[Антон Спирин]

Влад, ответ тут https://jsfiddle.net/ycyym828/
Попробуйте изменить в песочниче z-index для .relative с 10 на 11.
У вас на сайте .columns > .R-col с z-index: 20 и modal-backdrop с z-index: 20
Получается такая же ситуация как в песочнице.

[Влад]

Антон Спирин, блин и как это исправить?..

[Антон Спирин]

Влад, выносите модалку из .R-col. А зачем, вообще, .R-col выставлен z-index: 20?

[Влад]

как я вынесу ее оттуда, не поменяв расположение?)) абсолютное позиционирование чтоли делать? нехорошо..

а если zindex меньше 20, то остальные элементы на странице засвечиваются..

помогите(

[Антон Спирин]

Влад, с минимальными трудозатратами вы можете:
1. убрать у .R-col position: relative, но это может что-то поломать в вашей верстке.
2. перенести модалку в body. Отличное решение.

[Влад]

Антон Спирин, 1 вариант помог и пока все на месте) спасибо!

Answer 2

[Дмитрий Мельник]

не знаю, что вы хотели сделать, но у вас на странице два modal-backdrop. Один - внизу страницы, второй под блоком, который выводите сверху. Вот тот, что снизу и перекрывает белую плашку, из-за вложенности
Советую почитать https://habrahabr.ru/post/166435/