Question

我希望将图像放在距离图像底部大约10个像素的另一个图像的顶部。问题是，如果我按照下面的方法浏览网页浏览器时，顶部图像会移动到处。底部图像是相对的，如果有人不想打开链接，则顶部图像绝对定位。

Answer 1

虽然你的小提琴似乎两次使用相同的图像，但我认为我已经做出了你需要的调整以获得你的答案。你有相同的样式应用于图像容器内的两个图像...添加几个类解决了这个（或者你可以使用psuedo选择器）。

将来，我建议您将问题代码直接放入问题中，因为它可以帮助社区为您提供帮助。如果可以的话，也许可以回过头来将原始代码放到这个问题中，这将有助于那些在将来偶然发现这个问题/答案的人。

HTML：

<div>
  <div class="image-container">
    <img class="firstimg" src="http://lorempixel.com/1000/500">
    <a class="social-image" href="https://www.instagram.com">
          <img class="secondimg" src="http://lorempixel.com/1000/500">
        </a>
  </div>
</div>

CSS：

.image-container {
    position: relative;
}

.image-container .firstimg {
    width: 100%;
}

.social-image img {
    position: absolute;
    /* left: 3em; */
    top: 70px;
    width: 100%;
    z-index:9999;
}

Answer 2

啊，我想我现在对这个问题有了更好的理解......对左侧和上层属性使用百分比怎么样？这似乎在浏览器缩放时保持间距一致。

HTML：

<div>
  <div class="image-container">
    <img src="http://lorempixel.com/1000/500">

    <a class="social-image" href="https://www.instagram.com">
      <img src="http://lorempixel.com/1000/500">
    </a>
  </div>
</div>

CSS：

.image-container {
    position: relative;
}

.image-container img {
    width: 100%;
}

.social-image {
    position: absolute;
    left: 5%;
    top: 5%;
    width: 100%;
}

HTML将图像位置放在另一个上面

2 个答案: