图片在其他图片的右上角？ [复制]答案

【问题标题】：Image in top right of other image? [duplicate]图片在其他图片的右上角？ [复制]
【发布时间】：2020-02-29 02:54:06
【问题描述】：

我尝试了以下html：

<div style="text-align: center;">
 <a href="https://example.com">
  <img src="image.png">
 </a>
 <a href="https://example2.com" style="top: 0px; right: 0px;">
  <img src="logo.png" style="width: 20px; height: 20px;" />
  </a>
</div>

我试图完成的是第二个链接元素，其中包含一张图片，位于第一张图片的右上角。但是，较小的图像保留在另一个图像的外侧。有没有什么可能的方法可以用相同的布局来完成？如果没有，那么请告诉我如何使它工作。

【问题讨论】：

标签： html css

【解决方案1】：

@TheMaleBeyonce 的答案是对的。对于您当前的布局，您应该确保 div 元素仅用于包围外部图像，并确保 div 的宽度等于外部图像。

假设外图宽度为200px，正确代码如下：

<style>
.wrap {
  position: relative;
  width: 200px;
}

.inner {
  position: absolute;
  top: 0;
  right: 0;
}
</style>

<div class="wrap">
  <a href="https://example.com">
    <img src="image.png">
  </a>
  <a class="inner" href="https://example2.com">
    <img src="logo.png">
  </a>
</div>

the demo

【讨论】：

【解决方案2】：

所以，我要做的是将 div 设置为 position:relative;，将第二张图片设置为 position:absolute; right:0; top:0;。假设图像 1 与 div 一样大，这将使第二个图像的位置相对于第一个图像，因此您只需将其放置在您喜欢的位置，然后设置宽度/高度

【讨论】：

我认为他们实际上需要将位置分配给父 a 元素。

【解决方案3】：

要实现这一点，您需要将position: relative 提供给父元素，在这种情况下：给包装器div。然后将position: absolute 设置为您的小图像。确保将width: 100% 设置为您的大图像。

.big-img {
  position: relative;
}

.small-img {
  position: absolute;
  top: 0;
  right: 0;
}

<div style="text-align: center; position: relative; width: 500px;">
  <a class="big-img" href="https://example.com">
    <img width="100%" src="https://images.unsplash.com/photo-1517148815978-75f6acaaf32c?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1050&q=80">
  </a>
  <a class="small-img" href="https://example2.com" style="top: 0px; right: 0px;">
    <img src="https://images.unsplash.com/photo-1515879218367-8466d910aaa4?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1050&q=80" style="width: 100px; height: 100px;">  </a>
</div>

【讨论】：

.big-img { position: relative; } 不需要。
在这种情况下它不需要，但它可以安全使用，如果他用另一个 div 包裹div，那么如果他没有明确设置relative 位置，它可能不起作用。

【解决方案4】：

<style>
.wrap {
  position: relative;
  width: 200px;
}

.inner {
  position: absolute;
  top: 0;
  right: 0;
  width: 30px;
  height: 30px
}
</style>

<div class="wrap">
  <a href="https://example.com">
    <img src="image.png" width="100%">
  </a>
  <a class="inner" href="https://example2.com">
    <img src="logo.png" width="100%">
  </a>
</div>

【讨论】：