HTML 将图像置于另一个之上答案

【问题标题】：HTML Position image on top of anotherHTML 将图像置于另一个之上
【发布时间】：2016-07-02 13:34:28
【问题描述】：

我希望将图像放置在距图像底部约 10 像素的另一图像之上。问题是，如果我在缩放 Web 浏览器时遵循以下方法，则顶部图像会到处移动。底部图像是相对的，如果有人不想打开链接，顶部图像是绝对定位的。

CSS-Tricks text-blocks-over-image

【问题讨论】：

请告诉我们您使用的确切代码。
您是否将两个图像放在同一个容器中？ (div) 如果您需要进一步的帮助，请提供代码...
是的，两个图像都在同一个容器中。稍后将在 JSfiddle 中整理代码。
我现在正在一点一点地浏览代码，似乎我的问题是我的底部主图像设置为 100% 宽度，如果我删除它，顶部图像将保持在正确的位置.将完成将代码放入 JSfiddle 并希望找到一种将图像设置为全宽的方法。
请记住，如果您不设置主 div 标签的大小，它将增长以容纳其中最宽的元素...这可能是您的底部图像影响顶部图像的原因。

标签： html css

【解决方案1】：

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

以后，我建议您将问题的代码直接放入问题中，因为这将有助于社区帮助您。如果可以，也许可以返回并将您的原始代码放入此问题中，它将帮助那些将来偶然发现此问题/答案的人。

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

【讨论】：

我认为这并不能解决调整浏览器大小导致图像分离的问题。

【解决方案2】：

啊，我想我现在对这个问题有了更好的理解……如果对 left 和 top 属性都使用百分比呢？当浏览器缩放时，这似乎保持间距一致。

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

【讨论】：

不走运。这完全一样。我认为需要一种使顶部图像也响应浏览器高度/宽度的方法，否则它只会保持不变。