Почему не удается выдвинуть блок выше другого с z index?

Question

[an]

Почему не удается выдвинуть блок выше другого с z index?
вот сайт, если смотреть через dev tools на моб. версии есть панель, которая фиксированна к низу экрана
и есть сообщение куки
так вот я никак не могу zindexom поднять этот блок куки выше этой панели
какие не пытаюсь выставить значения, иконка корзины всеровно выше блока куки

Comments

[Ankhena]

Почему не удается выдвинуть блок выше другого с z index?

Потому что нужно менять z-index не корзины, а её родителя, лежащего в одном контексте наложения с уведомлением.

Сайт не открылся.

[Вадим]

Сайт у меня Ваш не открылся, но, судя по всему, потому что родитель к которому относится куки по индексу ниже блока с мобильными кнопка, и если это так, то z-index так не работает. У него есть свой принцип действия, не позволяющий пробивать всё что угодно насквозь как захочется.

Вот ссылка на англ версию, так как в русской картинка чёт не грузится. (У меня по крайней мере)
https://developer.mozilla.org/en-US/docs/Web/CSS/C...

[an]

Ankhena, так родителю и задаю а не самой корзине https://fruitex.online/
просто кнопка корзины выдвинута немного вверх обратным марджином

[Ankhena]

an, разбираться по скринам на которых видно только часть кода дело неблагодарное. Сайт по ссылке продолжает не открываться. Может ему нужен VPN или тип того, не проверяла.

Так что придется вам читать самостоятельно: контекст наложения

[an]

Ankhena, если сложнось в браузере включить впн, о чем тут говорить
у всех открывается нормально
хз что там у вас
пс
уже нашли проблему

[Ankhena]

an, да нет, не нужно путать понятия, это вы не хотите, чтобы мы смотрели сайт, ограничив аудиторию. Не хотите и не хотите, ваше право.

А я могу в этом случае помочь лишь ссылкой на теорию. С контекстом наложения в любом случае имеет смысл разобраться, потому что z-index работает совсем не так, как хочется большинству людей.

Answer 1

[Максим Самусевич]

Я нашёл виновника: обратите внимание на селектор .wrapper-middle, у него в нескольких местах задан z-index: 2, что создаёт новый stacking context. Из-за такого родителя ваше модальное окно с точки зрения z-index расположено не выше значения родителя, то есть 2. Подумайте в эту сторону. Возможно, стоит вынести модальное окно из обёрток и расположить на одном уровне с нижним баром, если это возможно в вашем случае. Всё равно модальному окну задан position: fixed, так что те обёртки не должны быть принципиальными для него.
Удачи, Андрей)

Comments

[an]

Спасибо!

[Максим Самусевич]

Пожалуйста) Рад помочь