Question

我很难在这里找到问题。

这是我的CSS：

.band1{
    background-image: url(http://edward.firstcom.com.sg/corporate/Tarkus%20Interiors/tarkushome.jpg);       
        background-repeat:no-repeat;
        background-attachment:fixed;
        background-position:center bottom;
        background-size:cover;
        padding:10% 0% 100% 0%;
        margin-bottom:50px;
        z-index:100;
}

.band2{
    background:#000;
    background-repeat:no-repeat;
    bottom:0;
    position:fixed;
    width:100%;
    height:50px;
    color:#fff;
    margin-bottom:50px;
    z-index:50;
    text-align:center;
}

.band3{
    background:#6F0;
    background-repeat:no-repeat;
    bottom:0;
    position:fixed;
    width:100%;
    height:50px;
    color:#fff;
    z-index:-1;
    text-align:center;
}

这是我的HTML

<div class="band1">
</div>

<div class="band2">
BLACK
</div>

<div class="band3">
GREEN
</div>

所以我的想法是，当我向下滚动时，BLACK栏会像它一直存在的那样出现。这意味着它从底部到顶部显示单词的方式（当我们滚动页面时，不像通常的方式那样从上到下）。
然后，当我再次向下滚动时，绿色条将以黑色条出现的方式出现。

我一直在玩z-index以使它们相互重叠。然而，当我滚动时，绿色条出来了，但黑色条不知何故搞砸了。

请帮忙。并为我破碎的解释和凌乱的代码感到抱歉。

这是Jfiddle

http://jsfiddle.net/2E5W3/

非常感谢。请给我解释一下，我不是很专业。

固定定位的重叠div

0 个答案: