2015-04-24 1 views
1

Хорошо ... У меня есть навигационное меню, которое, когда вы прокручиваете его вниз, меняется на фиксированное меню на вверху, которая сопровождает страницу.Div с абсолютным и нижним индексом позиции отображается сверху верхнего индекса z (фиксированное положение)

Но по какой-то причине, у меня есть DIV на странице, которая имеет абсолютную позицию и нижний Z-индекс, чем меню, но он по-прежнему отображается на верхней части меню ...

Вот функция который устанавливает, чтобы меню фиксировалось за определенную точку.

$(function(){ 
    var pos = $('#nav').offset().top; 
    $(window).scroll(function(){ 
     if($(window).scrollTop() > pos) { 
      $('#nav').parent().parent().css({position: 'fixed', top: '0px', background: '#fff', width: '100%', 'z-index': 9002, left:0}); 
     } else { 
      $('#nav').parent().parent().css({position: 'static', top: '0px', background: 'none', width: '100%', 'z-index': 1}); 
     } 
    }); 
}); 

Это ДИВ, что показывает на вершине, когда он не должен ...

.header { 
    position: relative; 
    z-index: 1; 
    margin: 0; 
    padding: 0; } 

Также here вы можете увидеть пример того, как это происходит, как вы прокрутите страницу вниз.

+0

Вы уверены, что '.header' CSS вы Размещенное верный? Согласно моей отладке в firefox, я заметил, что класс '.header' на самом деле имеет z-индекс 9001. Глядя на необработанный html txt для вашего файла, я нашел CSS для вашего' .header', применяя этот z-index также , Это ошибка в моем браузере? Если нет, это будет причиной ваших проблем. –

+0

Извините, видимо, я редактировал только локально. В любом случае, это не повлияет на то, что в меню есть индекс zz-индекса 9002! Но я исправил это, теперь у меня только 1, как я сказал в главном посте. –

ответ

3
  1. Нанести положение: относительная на <div id="page-content">
  2. Измените г-индекс на <header class="site-header"> к
Смежные вопросы