如何让绝对定位的div落后于它相对定位的父母

Question

我有这个导航菜单，我想要制作二级菜单的一部分（如顶部的50px）进入导航包后面：像这张照片：

<div class="main-nav-wrap wrapper">
    <nav class="inner-el container main-nav">
        <ul>            
            <li>
                <a href="" title="">Menu Item 1</a>

                <ul>
                    <li><a href="" title="">Menu Item 1-1</a></li>
                    <li><a href="" title="">Menu Item 1-2</a></li>
                    <li><a href="" title="">Menu Item 1-2</a></li>
                </ul>
            </li>
        </ul>
    </nav>
</div>
<!-- .main-nav-wrap -->

这是css：

.main-nav-wrap{
  position:relative;
  z-index:4;
}

.main-nav > ul > li {
  float:right;
  position:relative;
  z-index:2;
}

.main-nav > ul > li > ul {
  visibility:hidden;
  opacity:0;
  position:absolute;
  z-index:-1;
}

.main-nav > ul > li:hover > ul {
  visibility:visible;
  opacity:1;
}

我试图将.main-nav > ul > li > ul的一部分隐藏在.main-nav > ul > li > ul后面 请帮忙，谢谢 小提琴补充：http://jsfiddle.net/p91pdwLd/2/

Answer 1

从父元素

中删除z-index

以下是 demo ：

标记

<div class="parent">
    <div class="child"></div>
</div>

CSS

div {
    width: 100px;
    height: 100px;
}
.parent {
    position: relative;
    background: aqua;   
}
.child {
    position: absolute;
    background: maroon;
    top: 50px;
    left: 50px;
    z-index: -1;
}