Javascript 如何在Div中堆叠和隐藏图像，以便在它们之间设置动画（无浮动）

我目前正在为我的网站做一个网格布局。我想要的是尽可能快地加载一组9个图像，然后，在页面加载之后，我想要检索更多图像，将它们添加到图像容器中，并在它们之间设置动画。我知道如何进行过渡，但我不知道堆叠图像以便在它们之间设置动画的最佳方法。创建img节点并将其作为子节点附加，只会将它们添加到页面中。此外，试图绝对定位每个元素会对我的布局造成严重破坏

我知道浮动它们可以防止图像占用垂直空间，但是，由于我现在不使用浮动，我想避免使用它们只是为了堆叠图像

如果你看一下我的HTML，我基本上只是试图在div中创建一个由多个图像组成的堆栈，所有这些图像都在彼此的顶部

任何指导都很好

这是我的HTML：

<div id="mainContainer">
    <div class="imageHolder"><img class="homeImages" src="test.png"></div>
    <div class="imageHolder"><img class="homeImages" src="test1.png"></div>
    <div class="imageHolder"><img class="homeImages" src="test2.png"></div>
    <div class="imageHolder"><img class="homeImages" src="test3.png"></div>
    <div class="imageHolder"><img class="homeImages" src="test4.png"></div>
    <div class="imageHolder"><img class="homeImages" src="test5.png"></div>
    <div class="imageHolder"><img class="homeImages" src="test6.png"></div>
    <div class="imageHolder"><img class="homeImages" src="test7.png"></div>
    <div class="imageHolder"><img class="homeImages" src="test8.png"></div>
</div>

CSS真的让我着迷：

#mainContainer {
    margin: 0 auto;
    padding: 2.2em 0;
    width: 85%;
    text-align: center;
}

div.imageHolder {
    display: inline;
}

img {
    width: 30%;
}

.changed.opaque {
    opacity: .5;
    border: 2px solid red;
}

---

谢谢大家!

将主容器的位置设置为相对位置，将每个图像容器的位置设置为绝对位置

---

这使得所有图像容器div堆叠在彼此的顶部，这也是我不想要的。我只想堆叠动态添加的img，如果不是图像，我不确定您想要堆叠什么。当你在他们之间说和做动画时，你到底指的是什么类型的动画？新加载的图像在现有布局上的外观如何？在当前图像的顶部？在现有图像下方但堆叠？抱歉造成混淆。这里有一个粗略的例子。我希望主页有一个3 x 3的网格，最初加载。然后我想使用CSS3转换来转换到新图像。我确实需要原始的位置和布局保持不变，只是图像发生了变化。我想他希望支架中的图像堆叠起来。这就是简单地将相对放在保持架上，将绝对放在图像上。@Knyri+1放在您的解决方案上

#mainContainer {
    margin: 0 auto;
    padding: 2.2em 0;
    width: 85%;
    text-align: center;
}

div.imageHolder {
    display: inline;
}

img {
    width: 30%;
}

.changed.opaque {
    opacity: .5;
    border: 2px solid red;
}