保持放置在另一个图像之上的图像的位置答案

【问题标题】：Maintain position of an image placed on top of another保持放置在另一个图像之上的图像的位置
【发布时间】：2016-04-01 22:20:48
【问题描述】：

我有两张图片，一张放在另一张上面，它们应该看起来像一张图片。我这样做的原因是因为我想为图像 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 并保持它在那个位置，即使大小改变了。

如果它有助于更清楚地说明问题，两张图片一起构成了我的应用程序的徽标。

【问题讨论】：

标签： html css layout

【解决方案1】：

在 CSS3 中搜索 z-index 属性：

Zindex on W3School

它会做你需要的

【讨论】：

【解决方案2】：

你可以试试这样的。

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

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

<div class="container">
   <div class="img1">
      <div class="img2">

      </div>
   </div>
</div>

【讨论】：