Как исправить проблему с z-index у dropdown и panel?

Question

[Антон]

Здравствуйте!

Имеется выпадающее меню, которое находится в первом panel. Оно при раскрытии "залезает" под второй panel.


Во всем виновато это:

<div class="panel panel-default" style="opacity: 0.9;">

У каждого блока якобы персонально ставится opacity, поэтому один уходит под другой. Пробовал убрать opacity - все стало нормально.

Вешать дополнительно класс opacity - тоже не помогло. Добавление в класс panel-default значения opacity также не помогло.

Как это можно вылечить?

Comments

[Андрей Федоров]

Код полностью давайте, будем разбираться...

[Антон]

Андрей Федоров: ну код вы можете глянуть на сайта бутстрапа, ибо ничего сверхъестественного нету. Причина проблемы указана в вопросе.

[Андрей Федоров]

Антон: ну т.е. в бутстрапе ошибка, так что ли? )))

[Антон]

Андрей Федоров: Проделал тож самое на сайте бутстрапа:

[Андрей Федоров]

Антон: Простите, но я не понимаю, что вы хотели сказать этим скрином... Хочу помочь, честно, но не понимаю в чем тут у вас затык... Большие сомнения что бутстрап тут при делах, уж извините...

[Антон]

Андрей Федоров: да, навряд ли бутстрап тут...

У меня плодятся блоки циклом. В каждом блоке есть свое выпадающее меню, оно выходит за пределы своего родного блока.

Если нет opacity, то длинное меню располагается поверх блока, расположенного ниже. Если добавить opacity, то меню почему-то уходит бод следующий блок. Добавлял z-index - не помогло.

[Андрей Федоров]

Антон: Ок. Тогда попробуйте не opacity, rgba ставить для фона. А текст и бордюр у вас все равно должен быть поверх.

[Антон]

Андрей Федоров: rgba помогло, но все равно как-то неприятно. Даже не знаю, почему у меня не переваривается opacity. Ну ладно, спасибо!)

Answer 1

[bro-dev]

Если вы ставите z-index и он не срабатывает, значит вы не прочитали доки по z-index. попробуйте поставе у того что наезжает и того под что наезжает position: relative;

Comments

[Антон]

Проделал тож самое на сайте бутстрапа: