html - 如何将父 div 堆叠在 div 之上，而它的子 div 的 z-index 比两者都高？

Question

我在使用 z-index 时遇到了一些问题，因为我需要一个子元素具有比其父元素更高的 z-index，而父元素仍然需要高于其上方的 div。

我创建了一个 jsFiddle为了演示我正在努力实现的目标，我快要完成了，但似乎无法让 scrolling-container 向上滚动并越过 fixed-container。

更新:重要... 我已经尝试将它设为 position:absolute; 和 position:relative; ，但似乎破坏了 site-nav 的 z-index > div，它需要滚动所有内容，包括 Logo /链接。

我希望有一双新的眼睛能够看到我做错了什么，所以我们将不胜感激。

HTML:

<div class="fixed-header-container">
    <div class="logo">logo</div>
    <div class="links">links</div>
</div>

<div class="fixed-container">
    <img src="https://pbs.twimg.com/profile_images/599903869980823553/sNBE6oOk_400x400.jpg" />
</div>

<div class="scrolling-container">
    <div class="site-nav"> Site Nav</div>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla venenatis quis elit facilisis consequat. Nunc libero nisi, sollicitudin     quis iaculis eget...
</div>

CSS:

.fixed-header-container { 
    position:fixed !important; 
    top:0;
    width: 100%;
    z-index: 15;
}

.fixed-container { 
    height:auto; 
    position:fixed !important; 
    top:0;
    width: 100%;
    z-index: 1;
}

.logo {
    background-color: red;
    width: 50%;
    float: left;
}

.links {
    background-color: yellow;
    width: 50%;
    float: left;
    text-align: right;
}

img {
    max-width:100%;
}

.scrolling-container {
    width:100%;
    padding-bottom: 50px;
    background: pink;
    z-index:10;
}

.site-nav {
    position:absolute;
    z-index:40;
    background-color: green;
    text-align: center;
    width: 40%;
    margin: 0 auto;
    height: 50px;
}

Answer 1

z-index 仅适用于定位元素。您的 .scrolling-container 未定位。

.scrolling-container {
    position:relative;
    /* … rest of your styles */
}

http://jsfiddle.net/3w5dt/16/

---

因为你需要 .site-nav 也位于顶部的固定元素之上，你可以将它从 .scrolling-container 中取出，然后给出它与 margin-top 相同，如下所示:http://jsfiddle.net/3w5dt/17/