Question

我想让这些div按特定顺序排列。 “div”一个在底部，“包装”第二个和“幻灯片”应该在顶部。我一直试图用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>

Answer 1

您必须声明position属性才能添加z-index属性。尝试将包装器设置为position:static。

Answer 2

您应该尝试将position:absolute;或static用于两个div（因为另一个有position:fixed;）

您无法使用“正常”定位进行z-index。

无法使用z-index获得正确的堆栈顺序

2 个答案: