静态定位菜单和z索引问题，需要保持我的jquery动画

Question

我做了一个完美的菜单，我唯一的问题是我的子菜单将坐在我网站上的特定元素下。这是因为我的菜单定位为"静态"，所以我的z-index不适用于我的子菜单(子菜单)。

我不想做的是在我的网站上把各种元素的z-index设置为-1或类似的东西。

我还需要做的是保持我的jQuery滑动/向下动画。

我试图定位我的菜单相对而不是静态，但我有一些问题与我的jQuery动画。我也试过把一个顶级的div上面的一切，仍然没有运气-无论如何有这个?我该怎么办?我难住了。

HTML:

<div class="nt-main-navigation">
  <div class="nt-main-nav-animation">
    <div class="container">
      <div class="nt-main-navigation-wrapper clearfix">
            <!-- My menu, submenu (theproblem), logo, etc in here -->
      </div>
    </div>
  </div>
</div>

CSS:

/* Header Style 1 */
.activeScroll .nt-main-navigation {
    position: fixed;
    top: 0;
    left: 0;
}
.nt-main-navigation {
    -webkit-transition: top 500ms ease;
    -moz-transition: top 500ms ease;
    -ms-transition: top 500ms ease;
    -o-transition: top 500ms ease;
    transition: top 500ms ease;
    position: static;
   /* fix laggy transition */
   -webkit-transform: translateZ(0);
   -moz-transform: translateZ(0);
   -ms-transform: translateZ(0);
   -o-transform: translateZ(0);
   transform: translateZ(0);
}
.nt-main-nav-animation {
    position: relative;
}

JS:

// HEADER STYLE 1
// get header height
var getHeaderHeight = $('.nt-main-navigation').outerHeight();
var getToolbarHeight = $('.nt-toolbar-wrap').outerHeight();
// init last scroll position
var lastScrollPosition = 0;
// set container top property on page load with static position
$('.nt-main-navigation').css('top', '-' + getHeaderHeight + 'px');
$(window).scroll(function() {
    var currentScrollPosition = $(window).scrollTop();
    // At +100px menu slides down page
    if($(window).scrollTop() > getHeaderHeight + getToolbarHeight + 100) {
        $('body').addClass('activeScroll').css('padding-top', getHeaderHeight);
        $('.nt-main-navigation').css('top', 0);
        if(currentScrollPosition < lastScrollPosition) {
            $('.nt-main-navigation').css('top', '-' + getHeaderHeight + 'px');
        }
        lastScrollPosition = currentScrollPosition;
    } else {
        $('body').removeClass('activeScroll').css('padding-top', 0);
    }
});

Answer 1

在没有演示或协作的情况下很难知道发生了什么，但以下是我的想法。

z-index只影响位置值不是static的元素。看起来你没有在.nt-main-navigation类上设置任何东西。我会尝试添加以下内容:

.nt-main-navigation {position:relative; z-index:500;}

现在，position:relative;实际上不做任何，除非设置了top, left, bottom等值。