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

Question

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

我已将图像2放在图像1的顶部，一切看起来都很好。问题是，我将创建一个组件，并将重新使用相同的CSS（更改高度和宽度）和html在其他几个地方。

虽然我的样式适用于一个给定的大小，但只要它被放大或缩小，图像2就会改变它的位置。

这是我的HTML，

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

和我的css

.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%;
}

是否可以放置image2并将其保持在该位置，即使尺寸已更改。

如果它有助于清理更多内容，则两个图像一起构成我的应用程序的徽标。

Answer 1

在CSS3中搜索z-index属性：

Zindex on W3School

它会做你需要的事情

Answer 2

你可以尝试这样的事情。

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

＆＃13;

＆＃13;

function mergeArrayEntries(e1, e2, arr) {
var index = -1;
   for (var i = 0; i < arr.length; i++) {
     if (arr[i] == e1) {
       index = i;
     }
     if (arr[i] == e2 && index > -1) {
       arr[index] = arr[index]+"/"+arr[i];
       arr.splice(i, 1);
     }
   }
}

＆＃13;

.container{
  width:800px;
  height:800px;
  padding:50px;
}
.img1{
  position:relative;
  width:300px;
  height:100px;
  background-color:red;
  transition: all 1s;
}

.img2{
  width:100px;
  height:100px;
  background-color:yellow;
  border-radius:50px;
  transition:all 1s;
  position:absolute;
  top:-90px;
  right:20px;
}
.container:hover .img1{
  width:400px;
  height:150px;
}

.container:hover .img2{
  width:150px;
  height:150px;
  border-radius:100px;
}

＆＃13;

＆＃13;

＆＃13;