<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 巴士包
与他们在页面中的顺序有关吗?