css - z-index 与位置 : fixed in a circular fashion 战斗

Question

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

菜单 div 的子项是带有 position: absolute 的下拉菜单。它们应该与网页内容重叠。有一个 facebook 弹出窗口是顶部 div 的子项，它应该在显示时覆盖所有内容。

这有一些循环。如果 top 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

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;
}

<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>