Проблема с z-index с выпадающим меню twitter bootstrap

Я использую раскрывающееся меню twitter bootstrap в фиксированном навигаторе в верхней части моей страницы.

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

Если у меня есть что-либо на странице с position: relative (например, jquery ui accordion или диаграмма google), то раскрывающееся меню показывает за ним. Попробовал изменить z-index меню dd и навигационной панели, но не имеет никакого значения.

Единственный способ заставить меню сидеть над другим контентом - это изменить содержимое на position: fixed; ИЛИ z-index: -1;, но оба этих решения вызывают другие проблемы.

Оцените любую помощь, которую вы можете мне дать.

Я думаю, что это, вероятно, какая-то стандартная проблема с позиционированием CSS, которую я неправильно понял, поэтому не размещал никакого кода, но при необходимости мог бы делать.

Спасибо.

Ответы

Ответ 1

Просто понял, что происходит.

У меня был navbar внутри заголовка, который был position: fixed;

Изменен z-index в заголовке, и теперь он работает - думаю, я не выглядел достаточно высоко, чтобы контейнеры установили z-index изначально! # @!?

Спасибо.

Ответ 2

IE 7 на windows8 с bootstrap 3.0.0.

.navbar {
  position: static;
}
.navbar .nav > li {
  z-index: 1001;
}

фиксированный

Ответ 3

Это исправит его

.navbar .nav > li {
z-index: 10000;
}

Ответ 4

Иди сюда в ту же ошибку. Это сработало для меня.

.navbar {
    position: static;
}

Установив положение в статичное, это означает, что навигационная панель попадет в поток документа, как обычно.

Ответ 5

Решено, удалив -webkit-transform из навигационной панели:

-webkit-transform: translate3d(0, 0, 0);

разграблен fooobar.com/questions/130197/...

Ответ 6

Тем не менее проблема с Bootstrap v3, navbar и dropdown имеет тот же z-index;-( Я только увеличил z-index.dropdown-menu до 1001.

Ответ 7

У меня была такая же проблема, и после прочтения этой темы я решил добавить это в свой CSS:

.navbar-fixed-top {
    z-index: 10000;
}

потому что в моем случае я использую фиксированное верхнее меню.

Ответ 8

Это исправлено для меня:

.navbar-wrapper {
  z-index: 11;
}

Ответ 9

Это сработало для меня:

.dropdown, .dropdown-menu {
  z-index:2;
}
.navbar {
  position: static;
  z-index: 1;
}

Ответ 10

У меня была та же проблема. все дело в том, что мой div не имел фона. лол. Я добавил эту строку в div и проблему:

.mainDiv, .contentDiv{
    background:white;
}

Ответ 11

Решить эту проблему, удалив свойство transform: translateY(50%);.