gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-11-28 11:24:39 24 4
gpt4 key购买 nike

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

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com