Question

所以我有三个相对定位的div和一个固定元素。这个想法是固定元素在中间div中可见，而不是在顶部或底部div中。

#top {
    position:relative;
    z-index:2;
    background-color: whitesmoke;
    text-align: center;
    display:table;
    width:100%;
    height:40vh;
        -webkit-box-shadow: 6px 6px 26px 1px rgba(0,0,0,0.75);
        -moz-box-shadow: 6px 6px 26px 1px rgba(0,0,0,0.75);
        box-shadow: 6px 6px 26px 1px rgba(0,0,0,0.75);
}
#middle {
    position:relative;
    text-align: center;
    width:100%;
    height:60vh;
    background-image: asset-url('foo.png');

    p {
        text-align: center;
        line-height: 200%;
        text-shadow: 3px #eee;
    }
    z-index:-10;
}
#bottom {
    position:relative;
    background-image: asset-url('bar.png');
    text-align: center;
    width:100%;
    height:50vh;
    -webkit-box-shadow: 6px 6px 26px 1px rgba(0,0,0,0.75);
    -moz-box-shadow: 6px 6px 26px 1px rgba(0,0,0,0.75);
    box-shadow: 6px 6px 5px 1px rgba(0,0,0,0.75);

    z-index:999;
}

我的固定元素是：

#fixedEle {
position:fixed;
    top:50%;
    left:5%;
    z-index:2;
    transform: translate(00%, -50%);
    img {
        height:80%;
        width:80%;
    }
}

现在，固定元素是#Top（按预期）在#Middle上方（按预期）和#Bottom上方（UNINTENDED！）中间div仍位于底部，但我不知道为什么，一切都是相对定位的，z指数就是它们应该的位置。高，低，高。

如何让底部div低于中间，从而隐藏固定元素？

更新：Html

<div id="top">
    <div id="text1">
        <p data-start='opacity: 0' 
        data-30p-start='opacity: 1'>Yada yada yada this that and some other junkYada yada yada this that and some other junkYada yada yada this that and some other junkYada yada yada this that and some other junkYada yada yada this that and some other junkYada yada yada this that and some other junkYada yada yada this that and some other junk</p>
    </div>
</div>
<div id="middle">
    <div id="fixed">
        <%=image_tag ('fixed_logo.png')  %>
    </div>
</div>
<div id="bottom">

</div>

Answer 1

一小时后：我正在使用的其中一个图像有一个alpha通道并且部分透明，所以看起来好像fixedEle不在coverEle之后，尽管它是。

如果您正在处理z-index并遇到问题，请确保您没有尝试隐藏透明元素背后的项目！

Answer 2

我会尝试重新排序你的html中div的顺序，并使用它们的z-indices来获得所需的排序顺序。

Z-Index的问题（Over Over Over）

2 个答案: