如何在没有原始设置图像的包装高度的情况下将图像正确定位在另一个图像上方？

【问题标题】：How to correctly position an image above another image, without the originally set image's wrapper height?如何在没有原始设置图像的包装高度的情况下将图像正确定位在另一个图像上方？
【发布时间】：2021-12-20 10:21:56
【问题描述】：

我正在尝试将图标定位在图像的右下角。有一个包装器，应该适合不同尺寸的图像。还有一个 img-wrapper，包括图片和图标。

问题是它需要为 img-wrapper 指定 100% 的高度，这也是一个图标的父块，所以它在这个块的底部而不是图像的底部。 img 标签也不支持 ::after 伪元素。

有没有办法在不带js的情况下正确定位图标？

示例：codepen.io/girich1/pen/YzrQaVw

【问题讨论】：

标签： html css image

【解决方案1】：

当然，你只需要 1 个小包装来保存图标。

在img.icon 两行周围添加<div class="imgicons">：

  <div class="imgicons">
    <img class="icon" src="https://img.icons8.com/color/50/000000/verified-badge.png"/>
  </div>

接下来，从 CSS 中删除当前的 .icon { ... } 部分。并添加以下内容：

.imgicons {
  margin: 0; padding: 0;
  position: relative;
  text-align: right;
  top: -30px;
  padding-right: 10px;
}

.icon {
  width: 20px;
  height: 20px;
  margin: 0; padding: 0;
}

如果我理解正确，那应该可以得到你想要的。

（仅供参考：图标是20px；我想你会想说一个10px 与右下角相比的填充，加在一起就是30px；这就是-30px指）

【讨论】：

哇，这个图标的包装器真的起了作用，非常感谢！