Слои, z-index, перекрытие слоев

248
28 февраля 2017, 15:04

Выпадающее меню кнопки попадает по слой другого элемента, который находится ниже. Хотя у выпадающего меню явно указано абсолютное позиционирование и высокий z-index. Страница на boostrap, выпадающее меню с классом drop-down. Самому элементу, под который попадает выпадающее меню, явно указываю z-index: -1, но ситуацию даже и это не спасает, элемент теряет видимость, но все также перекрывает выпадающее меню.

Как сделать что юы выпадающее меню, было поверх всех слоев ?

Answer 1

Дело в том, что вы скорее всего не понимаете, как он, z-index, работает. Статья по теме.

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

...

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

У вас либо первый, либо второй, либо смешение обоих вариантов.

Answer 2

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

Ну и не забудьте указать позиционирование для родительских элементов. Например, relative.

READ ALSO
Показ кнопки меню на small разрешении. Navbar bootsrap

Показ кнопки меню на small разрешении. Navbar bootsrap

Мне нужно активировать показ кнопки вызова мобильного меню на sm разрешении, можно ли так сделать избежав смены точек медиа запросовСпасибо

261
Нет скролла для промотки страницы при использовании echo()

Нет скролла для промотки страницы при использовании echo()

Свойство word-wrap: break-word повесьте на body

223
Как можно удалить bottom, top, left, right?

Как можно удалить bottom, top, left, right?

Мне нужно удалить значение bottom у элементов с position: absolute;Очень часто бывает что если на большом экране указан bottom, а на маленьком экране мне...

275
CSS анимация после перетаскивания

CSS анимация после перетаскивания

Хочу сделать анимацию после перетаскиванияС перетаскиванием проблем нет, просто предположим есть event document

246