1
<div id="bus"><img src="assets/img/bus.png" id="bus_inner"/></div>
<div id="parallax">
    <div id="bgsun" class="depth-1"></div> 
    <div id="bg" class="depth-1"></div>
    <div id="bag" class="depth-1"><img src="assets/img/bag.png" /></div>
</div>

#parallax { background: #5b3516; width: 17000px; height: 100%; position: relative; }

#bgsun { position: absolute; width: 17000px; top: 0; height: 100%; background: url("../img/bg_sun.jpg") no-repeat; z-index: 10; }

#bg.depth-1 { position: absolute; width: 17000px; top: 0; height: 100%; background: url("../img/bg.jpg") no-repeat; z-index: 20; }

#bus { position: fixed; top: 495px; left: 90px; z-index: 30; }

#bus_inner { position: absolute; top: 0; left: 0; z-index: 40; }

#bag {
    position: absolute;
    top: 55px;
    left: 7320px;
    z-index: 50;
}

#bag img {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 60;
}

试图将公共汽车元素放在包后面,但没有运气。固定位置不适用于 z-index 对吗?我如何将这些元素分层,所以顺序是

bgsun bg 巴士包

与他们在页面中的顺序有关吗?

4

0 回答 0