我想让这些 div 按特定顺序排列。 “div”第一个应该在底部,“wrapper”第二个和“slideshow”应该在顶部。我一直在尝试用 z-index 解决它,但这会使包装器向左移动而不是留在中间。有谁知道解决这个问题的方法吗?
CSS
#wrapper{
background-image: url(Pictures/back.png);
width: 800px;
height: 315px;
margin: auto;
margin-top: 15px;
border: 0px solid #000;
border-radius: 10px;
z-index: 1;
}
#slideshow{
margin: 0px;
background-color: none;
width: 800px;
height: 315px;
padding: 0px;
position: reletive;
z-index: 2;
}
#div{
width: 100%;
height: 100%;
background: #d7d7d7;
position: fixed;
top: 0;
left: 0;
z-index: -1;
}
HTML
<body>
<div id="wrapper">
<div id="slideshow">
<div id="wowslider-container2">
<div class="ws_images"><ul>
<li><a href="music.html"><img src="data2/images/pic1.png" alt="pic1" title="pic1" id="wows2_0"/></a></li>
<li><a href="video.html"><img src="data2/images/pic2.png" alt="pic2" title="pic2" id="wows2_1"/></a></li>
<li><a href="pictures.html"><img src="data2/images/pic3.png" alt="pic3" title="pic3" id="wows2_2"/></a></li>
<li><a href="shop.html"><img src="data2/images/pic4.png" alt="pic4" title="pic4" id="wows2_3"/></a></li>
</ul></div>
<span class="wsl"><a href="http://wowslider.com">CSS3 Carousel</a> by WOWSlider.com v4.8</span>
<div class="ws_shadow"></div>
</div>
<script type="text/javascript" src="engine2/wowslider.js"></script>
<script type="text/javascript" src="engine2/script.js"></script>
</div>
</div>
<label for="radio-black" class="btn btn-default"><img src="Pictures/b1.png" width="33" height="33"></label>
<input type="radio" name="background-button" id="radio-black" />
<label for="radio-pink" class="btn btn-default label-pink"><img src="Pictures/b2.png" width="33" height="33"></label>
<input type="radio" name="background-button" id="radio-pink" />
<label for="radio-white" class="btn btn-default label-white"><img src="Pictures/b3.png" width="33" height="33"></label>
<input type="radio" name="background-button" id="radio-white" />
<div></div>
</div>
</body>
最佳答案
您必须声明一个位置属性以添加 z-index 属性。尝试将包装器设置为 position:static
。
关于html - 无法使用 z-index 获得正确的堆栈顺序,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21408433/