将多个图像放在同一位置

Question

目标

我正在练习编写自己的简单JavaScript幻灯片插件，目标方法是将所有图像 - 所有图像大小相同 - 放在屏幕上的相同位置（所有图像都具有相同的位置） x和y值，但改变他们的z-index es，根据需要在彼此前面或后面随机播放，循环遍历每一个。到目前为止，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本身会导致整个布局陷入混乱。所以如果有人有任何建议，我会非常感激！ ：）

Answer 1

将position:relative添加到.images课程。绝对定位的元素相对于其最接近的祖先元素定位。

Answer 2

您需要将position: relative应用于div。这样，图像使用其父div作为参考。

Answer 3

一种选择是使用JavaScript修改display和visibility CSS属性以显示和隐藏图像。

visibility: hidden表示该元素不可见，但它仍占用页面流中的空间。

display: none表示该元素在页面流中不占用空间。

我看到当display为none但visibility为hidden时，浏览器的行为很奇怪。我发现最好切换它们。

对于您想要显示的图片，请设置display: block和visibility: visible