z-index与位置战斗：以循环方式固定

Question

我有一个顶级div position: fixed。在div之后，我有一个菜单div也有position: fixed，它将被定位为与顶部div重叠，因此它需要一个正确的z-index。在这些div之后，我有一个div包含position: absolute的网页内容。它将有一个上边距，因此它不会与顶部div重叠。

菜单div的子项是带有position: absolute的下拉菜单。它们应该与网页内容重叠。有一个facebook popup是top div的子项，它应该在显示时重叠所有内容。

这有一些循环。如果顶部div在z-index中是最顶层的，则facebook div将在显示时重叠所有内容。但是，顶部div也会与菜单重叠，因此根本不会显示。

那么我该如何解决这个问题？

http://jsfiddle.net/t8sgezz8/

HTML：

<div class="top">
    <div class="facebook">
        <div class="btn"></div>
        <div class="facebook-popup">facebook</div>
    </div>
</div>
<div class="menu-parent">
    <div class="menu">
        <ul>
            <li>foo</li>
            <li>bar</li>
            <li>test</li>
            <li>
                abc
                <ul class="dropdown-menu">
                    <li>abc 1</li>
                    <li>abc 2</li>
                    <li>abc 3</li>
                </ul>
            </li>
            <li>def</li>
            <li>ghi</li>
        </ul>
    </div>
</div>
<div class="contents">
    "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>

的CSS：

body
{
    height: 500px;
    margin: 0;
}

.top,
.menu-parent,
.facebook
{
  position: fixed;
}

.top
{
    height: 75px;
    width: 100%;
    background: #413d25;
}

.facebook
{    
    top: 20px;
    left: 220px;
}

.menu-parent
{
    top: 30px;
    z-index: 10;
    right: 32px;
}

.btn
{
    background: #4460ae;
    width: 30px;
    height: 10px;
    border: 1px solid black;
}

.facebook-popup
{
    border: 1px solid #000;
    background: #ccc;
    width: 200px;
    height: 200px;
}

.menu
{
    color: #fff;
}

.menu > ul
{
    list-style: none;
}

.menu li
{
    float: left;
    padding-left: 10px;
    padding-right: 10px;
}

ul.dropdown-menu
{
    position: absolute;
    background-color: #879300;
    width: 100px;
    list-style: none;
    float: left;
    padding: 2px;
}

ul.dropdown-menu li
{
    margin-left: 0;
}

.contents
{
    padding: 10px;
    margin-top: 75px;
    position: absolute;
}

Answer 1

＆＃13;

＆＃13;

body
{
    height: 500px;
    margin: 0;
}

.top,
.menu-parent,
.facebook
{
  position: fixed;
}

.top
{
    height: 75px;
    width: 100%;
    background: #413d25;
}

.facebook
{    
    top: 20px;
    left: 220px;
}

.menu-parent
{
    top: 30px;
    z-index: 10;
    right: 32px;
}

.btn
{
    background: #4460ae;
    width: 30px;
    height: 10px;
    border: 1px solid black;
}

.facebook-popup
{
    border: 1px solid #000;
    background: #ccc;
    width: 200px;
    height: 200px;
  position:relative;
  z-index:11
}

.menu
{
    color: #fff;
}

.menu > ul
{
    list-style: none;
}

.menu li
{
    float: left;
    padding-left: 10px;
    padding-right: 10px;
}

ul.dropdown-menu
{
    position: absolute;
    background-color: #879300;
    width: 100px;
    list-style: none;
    float: left;
    padding: 2px;
}

ul.dropdown-menu li
{
    margin-left: 0;
}

.contents
{
    padding: 10px;
    margin-top: 75px;
    position: absolute;
}

＆＃13;

<div class="top">
    <div class="facebook">
        <div class="btn"></div>
        <div class="facebook-popup">facebook</div>
    </div>
</div>
<div class="menu-parent">
    <div class="menu">
        <ul>
            <li>foo</li>
            <li>bar</li>
            <li>test</li>
            <li>
                abc
                <ul class="dropdown-menu">
                    <li>abc 1</li>
                    <li>abc 2</li>
                    <li>abc 3</li>
                </ul>
            </li>
            <li>def</li>
            <li>ghi</li>
        </ul>
    </div>
</div>
<div class="contents">
    "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>

＆＃13;

＆＃13;

＆＃13;