我正在练习写我自己的简单的JavaScript幻灯片插件，以及预期的方法是让所有的图像-所有这些都是相同的尺寸-在相同的位置在屏幕上（因此所有具有相同x和y值） ，但请更改其z-indexES，以根据需要在彼此前面或后面随机播放它们，并循环遍历它们中的每个。到目前为止，JavaScript一直运行良好，但是我无法将图像放在页面上彼此重叠的所有层上-它们只是从容器顶部向下堆叠，每行一层。
这是我HTML相关部分的简化版本：
<section>
<div class="images">
<img src="1">
<img src="2">
<img src="3">
</div>
</section>
和CSS
.images {
height: 15em;
margin: 0 auto;
overflow: hidden;
width: 20em;
}
如您所见，它并不太复杂。不过，我对从这里去哪里不知所措。我已经能够得到图像层的方式我想的唯一方法是应用position: absolute;和top: 0;对图像，但也引发他们自己以外的div，然后将其应用于对div自身原因造成的整个布局进入混乱。因此，如果有人有任何建议，我将不胜感激！:)
添加position:relative到您的.images课程。绝对定位的元素相对于其最接近的祖先元素进行定位。
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句