dazle
@dazle
Хороший электрик, но в душе программист

Всплывающие блоки с высоким z-index-ом не закрывают другие блоки. Почему?

Есть 2 фиксированных блока бокового меню. При наведении на любой из блоков появляется еще один фиксированный блок который закрывает эти 2 блока. Проблема в том если допустим блок 1 имеет z-index:100, а 2ой блок 99 то при наведении на 2ой блок и при появлении блока через hover он не будет закрывать 1ый блок, даже если у него z-index:1000; Мне нужно чтобы при наведении на любой из блоков, всплывающий блок закрывал все.
<div class="content1">
  
  <p102>Пользователи</p102>
	
<div class="toggler1">
...
</div></div>

<div class="content2">

<p103>Добавить фильм</p103>

<div class="toggler2">
...
</div></div>

.content1{background:url(../img/ruk.png) no-repeat;width:150px;height:100px;position:fixed;top:290px;left:2%;z-index:100;text-align:center;}
   .toggler1 {display:none;position:fixed;z-index:1000;background-color:rgb(245,245,245);left:0px;padding-left:10px;}
   .content1:hover .toggler1 {display:block;position:fixed;z-index:1000;width:370px;box-shadow:2px 2px 4px rgb(175,175,175);top:120px;}
 

   .content2{background:url(../img/ruk.png) no-repeat;width:150px;height:100px;position:fixed;top:420px;left:-6%;z-index:99;text-align:center;}
   .toggler2 {display:none;position:fixed;z-index:1000;background-color:rgb(245,245,245);left:0px;text-align:center;}
   .content2:hover .toggler2 {display:block;position:fixed;z-index:1000;width:370px;box-shadow:-2px 2px 4px rgb(175,175,175);top:300px;}

Меняю z-index на больший у 2го блока допустим 101 и получается все наоборот (при наведении на 1ый блок всплывающий блок не закрывает 2ой блок), я так понял тут все от родительского элемента зависит, хотя всплывающие блоки имеют намного больший z-index.
  • Вопрос задан
  • 247 просмотров
Пригласить эксперта
Ответы на вопрос 2
Убрать z-index у всех родителей всплывающих окон
Ответ написан
Sviside
@Sviside
Would You Kindly?
Соглашусь с Дмитрием - z-index не панацея, уберите его просто у родителей

*топорный пример ниже*
https://jsfiddle.net/sudakoff/03dgoLjs/1/
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы