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

标签 html css z-index

我想让这些 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/

相关文章:

html - 如何移动上面的第一个选项卡?

html - 重新绘制 Html5 Canvas

html - 表格单元格之间有空格

css - 下拉菜单将不起作用

html - div 和 li 与 z-index 的位置 - 下拉菜单 - 再一次

javascript - 如何暂时禁用 div 的悬停?

html - 基于表格的布局与基于 Div 的布局

javascript - 在基本图像上的特定区域单击时在弹出窗口(同一窗口)中显示图像

jquery - 带有嵌套 div 的不稳定 slidetoggle jquery 行为

css - 在已经制作的内容之间索引图像