Скрытие класса при нажатии на кнопку

125

19 февраля 2021, 05:40

Почему при активации всплывающего окна изображение лежит поверх формы обратного звонка? Как сделать, чтобы слои были упорядочены? При нажатии на кнопку "Перезвоните мне" происходит данная ситуация, пытался корректировать z-index, эффекта нет. Ссылка на сайт: http://vcland.wg3036.wg01.ru Код приложен: codepen.io/MorrisJerrald/pen/OeXaMw

Answer 1

у вас элемент #cmbf-form-container-110 (попап с формой обратного звонка) лежит ВНУТРИ блока с кнопкой, которая его вызывает. А он лежит ВНУТРИ секции #section-id-1560682431859, которая лежит НА ОДНОМ УРОВНЕ с остальными секциями, в т.ч. теми, в которых есть дальнейший контент.

Так вот, z-index у всплывающего окна работает внутри его родителей, но не подействует на "дядей" и "двоюродных братьев". Например в конструкции:

<section id="1">
    <div id="A" style="z-index:999"></div>
    <div id="B"></div>
<section>
<section id="2">
    <div id="C" style="z-index:1"></div>
    <div id="D"></div>
<section>

элемент #A будет располагаться поверх любого элемента В ПРЕДЕЛАХ секции #1, а содержимое секции #2 его все равно перекроет. Z-index - свойство НЕ глобальное.

Правильное решение - вынести модальный блок за пределы секции с контентом в конец документа.

Костыль - задать z-index для секции, в которой находится этот блок так, чтобы она была выше прочих (но не менять ее position).

П.С. код на codepen у вас нерабочий, выдает черт-те что распёртое и кучу ошибок в консоль.