2016-01-26 3 views
0

У меня есть фиксированный navbar на моей веб-странице. Теперь у меня есть поле ввода, которое при сфокусированном открытии списка предложений в диалоговом окне. Теперь проблема, с которой я сталкиваюсь, заключается в том, что диалоговое окно находится под навигационной панелью и Я хочу, чтобы это было над навигационной панелью.Положите модальный div на фиксированный navbar

Диалоговое окно CSS

.search-overlay-container { 
    position: static; 
    border-bottom-right-radius: 20px; 
    border-bottom-left-radius: 20px; 
    width: 340px; 
    box-shadow: 0 0 0px; 
    padding: 0px; 
    background-color: #343031; 
    overflow: auto; 
    margin-top: -79px; 
    min-height: 475px; 
    max-height: 475px; 
} 

неподвижная Navbar

position: fixed; 
    right: 0; 
    left: 0; 
    z-index: 1030; 
    -webkit-transform: translate3d(0, 0, 0); 
    transform: translate3d(0, 0, 0); 
} 
+0

сообщение navbar код? –

+0

share the fiddle mate – Siddharth

+0

Возможно, вы столкнулись с той же проблемой, что и этот вопрос: https://stackoverflow.com/questions/34755770/modal-appear-behind-fixed-navbar – Sventies

ответ

0

Добавить свойство CSS Z-индекс, который выше, чем навигационной панели. Например:

z-index: 1000; 
+0

Я пробовал, что он не работает – 800i

0

Вам необходимо указать положение абс и дать ему минимальный индекс z: 1031. Он должен быть более высоким z-индексом, чем навигация, чтобы не скрываться, подумайте об этом как листы бумаги, которые складываются друг на друга. Родитель должен быть относительным положением, чем все дети, у которых есть z-индекс в этом родителе, и они абсолютно позиционированы, будут складываться в соответствии с этим значением z-index, самым высоким сверху.

Дополнительная информация здесь: - https://en.wikipedia.org/wiki/Z-index

Смежные вопросы