滑出式导航：Z-Index 问题

Question

edit* 根据第一个回复，这可能无法通过 z-index 修复，因为这是元素定位的问题。这可能是发布新帖子的时候了，但是如果您阅读了我对第一个回复的评论，我可以用绝对位置解决这个线程的问题，但是会出现另一个问题 -> 设置具有绝对位置的元素的相对位置。 ..这听起来有点违反直觉，哈哈。无论如何，一旦问题完全不同并且值得不同的线程，将尽快删除。

我正在尝试创建一个垂直导航菜单，它的子菜单从上方（和后方）滑出并在每个单击的导航项下方停止。我目前将 HTML 设置为在它们各自的导航项之后直接具有相关的子菜单，以便使用相对位置，我可以将 jQuery 设置为将子菜单设置为 top:0 并且它总是直接位于相关导航项的下方.

我将后续导航项设置为添加一个可以减少其 z-index 的类。我希望这将使菜单能够从上方的导航项下方滑出（因为菜单的 z-index 较低），同时放置在较低项的顶部。

两者都没有奏效。正如您从下面链接的小提琴中看到的那样......菜单不仅会滑过上面的项目，而且还会将下面的项目推开。

我确信有无数种方法可以做到这一点，但我觉得相对位置是处理多个子菜单的唯一方法，所有子菜单都需要相对于它们各自的导航项放置。但显然我的方法并非没有缺陷......

因此，我们将不胜感激。

http://jsfiddle.net/pGfCX/57/

jQuery:

$('.row').click(function() {

    // make all siblings AFTER row clicked get this class to reduce z-index and allow the menu to display above these rows (while still remaining below the rows above)

    $(this).nextAll().addClass('rowZ');
    $(this).next('.menu').show()
    $(this).next('.menu').animate({'top':'0'});

});

// when menu is out, the row clicked is the header row, upon clicking this, the related menu (and by default, all subsequent menus within) animate back up and hide

$('.rowHead').click(function() {

    $(this).next('.menu').animate({'top':'-100%'});
    $(this).next('.menu').hide();

});

您还会注意到，我正在添加一个类来更改单击导航项并打开子菜单时的颜色。我想在单击此类时恢复子菜单……但这也不起作用？但这是一个不同的问题，可能是另一个线程。

提前感谢您的任何帮助。

Answer 1

如果您希望您的子菜单项显示在其他菜单项之上，您需要使用position:absolute 将它们从文档的正常流程中删除。 position: relative 考虑了子菜单项的高度，将菜单项元素向下推。

示例：http://jsfiddle.net/Ps73y/3/

HTML

<div id="container">
    <div class="menu-item">
        <div>Menu Item 1</div>
        <div class="sub-menu-items">
            <div class="sub-menu-item">Sub Menu Item 1</div>            
            <div class="sub-menu-item">Sub Menu Item 2</div>            
        </div>
    </div>
    <div class="menu-item">
        <div>Menu Item 2</div>
        <div class="sub-menu-items">
            <div class="sub-menu-item">Sub Menu Item 1</div>            
            <div class="sub-menu-item">Sub Menu Item 2</div>            
        </div>
    </div>
</div>

CSS

.sub-menu-items{
   position: absolute;
   display: none;
   top: 0;
   background: red;
   z-index:1100;
}

.sub-menu-item{
    width:120px;
    cursor:pointer;
    position: relative;
}

.menu-item{
    background:yellow;
    width:120px;
    position:relative;
    left:0;
    cursor: pointer;
}

#container{
    background:grey;
    width:120px;
    height:100%;
    position:fixed;
    top:0;
    left:0;
    z-index:0;
}

Javascript

$(".menu-item").click(function(){
    $(this).find(".sub-menu-items").css("top", $(this).height());
    $(this).find(".sub-menu-items").slideToggle();
});