Html 保持图像放置在另一个图像上的位置

我有两个图像，一个放在另一个上面，它们应该看起来像一个图像。我这样做的原因是因为我想给图像2设置动画

我已经把图像2放在了图像1的上面，一切看起来都很好。问题是，我将在此基础上创建一个组件，并在其他一些地方重用相同的css（高度和宽度发生变化）和html

虽然我的风格适用于一个给定的尺寸，但一旦放大或缩小，图2就会改变它的位置

这是我的html

<div class="container">
 <img class="image1" src="image1.png" />
 <img class="image2 animated" src="image2.png" />
</div>

是否有方法放置image2并将其保持在该位置，即使大小已更改

---

如果这有助于更清楚地说明问题，那么两个图像一起构成我的应用程序的徽标。

在CSS3中搜索z-index属性：

---

它将执行您需要的操作

搜索CSS3中的z-index属性：

---

它可以满足你的需要

你可以试试这样的东西

在这里，第一个图像需要处于相对位置，第二个图像需要处于同一元素的绝对位置。之后，可以设置第二个图像的底部和右侧属性

.container{
宽度：800px；
高度：800px；
填充：50px；
}
.img1{
位置：相对位置；
宽度：300px；
高度：100px；
背景色：红色；
过渡：所有1；
}
.img2{
宽度：100px；
高度：100px；
背景颜色：黄色；
边界半径：50px；
过渡：所有1；
位置：绝对位置；
顶部：-90px；
右：20px；
}
.container:hover.img1{
宽度：400px；
高度：150像素；
}
.container:hover.img2{
宽度：150px；
高度：150像素；
边界半径：100px；
}

---

您可以尝试这样的方法

在这里，第一个图像需要处于相对位置，第二个图像需要处于同一元素的绝对位置。之后，可以设置第二个图像的底部和右侧属性

.container{
宽度：800px；
高度：800px；
填充：50px；
}
.img1{
位置：相对位置；
宽度：300px；
高度：100px；
背景色：红色；
过渡：所有1；
}
.img2{
宽度：100px；
高度：100px；
背景颜色：黄色；
边界半径：50px；
过渡：所有1；
位置：绝对位置；
顶部：-90px；
右：20px；
}
.container:hover.img1{
宽度：400px；
高度：150像素；
}
.container:hover.img2{
宽度：150px；
高度：150像素；
边界半径：100px；
}

.container {
 display:block;
 margin: 0 auto;
 margin-top: 30px;
 margin-bottom: 40px;
 width:43%; // width of the container will change
}
.image2 {
 margin-top: -50px; 
 margin-right: 27px; 
 float:right; 
 width: 10%;
}