Всем привет! У меня есть sticky header и кнопки фильтров,

Question

Всем привет! У меня есть sticky header и кнопки фильтров,

которые position: fixed;
В хидере и в кнопках по клику вызывается диалог, который отображает разный контент.
Проблема следующая: при открытии диалога - одно висит над другим (например, контент хидера висит над контентом фильтров, или если изменить z-index наоборот, то кнопки фильтров будут висеть в диалоге хидера как на фотке).
Проблема происходит из-за того, что fixed как бы переопределяет z-index для своих детей (и даже если у моих диалогов стоит z-index: 9999, то он все равно максимально будет как в кодпене ниже)
https://codepen.io/500x500/pen/Rwqvqej - тут частичная имитация верстки

Как можно поиграться с z-index и position'ами , чтобы было корректно?

#css #frontend #html #programming #russian

0

09.08.2023

7 ответов

17 просмотров

Тихон Жарких Автор вопроса

да там не сымитировать его целиком =( Как-то можно избежать переопределения z-index при position: fixed?

0

09.08.2023

Андрей Гуртовой

Ничего не понял можно по порядку.? Вы знакомы со stack'ующейся природой z-index?

0

09.08.2023

Андрей Гуртовой

Андрей Гуртовой
Ничего не понял можно по порядку.? Вы знакомы со s...

Если у двух элементов - братьев установлены разные зет индексы, то в элементе с меньшим зет индексом вы никаким способом не сможете выскочить над элементами брата с большим зет индексом. Это также распространяется на детей

0

09.08.2023

Тихон Жарких Автор вопроса

Андрей Гуртовой
Ничего не понял можно по порядку.? Вы знакомы со s...

Ага, давайте) Часть первая: 1) У меня есть хидер, он стики 2) У него есть z-index: 1002 3) из него открываются модалки Часть вторая: 1) У меня есть контейнер с кнопками фильтров, он фиксед 2) По клику на кнопку открываются модалки 3)

0

09.08.2023

Андрей Гуртовой

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

0

09.08.2023

Тихон Жарких Автор вопроса

Андрей Гуртовой
1.3 хтмл модалки не должен находиться внутри хидер...

Ну вот, а там либа висит, которая эти модалки и зовет так что уже мимо этого решения (

0

09.08.2023