Question

我在z-index方面遇到了一些麻烦，因为我需要一个子元素来获得比它的父元素更高的z-index，而父元素仍然需要高于上面的div它。

我已经创建了一个jsFiddle来展示我想要实现的目标，我几乎可以实现，但似乎无法让scrolling-container向上滚动fixed-container。

Udate：重要...... 我尝试过它position:absolute;和position:relative;但它似乎打破了site-nav div的z-index，它需要滚动包括徽标/链接在内的所有内容。

我希望一副新眼睛能够看到我做错了什么，所以任何帮助都会受到赞赏。

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/

Answer 2

只需在.scrolling-container上使用position: relative;。

如何将父div叠加在div之上，而它的孩子的z-index高于两者？

2 个答案: