图标定位问题：如何将图标置于图片右下角而非屏幕右端

你需要让图标相对于图片的容器定位，以下是能实现目标效果的完整代码（对应截图样式）：

HTML 代码 #

<aside class="side">
  <img class="image" src="images/bread.JPG">
  <i class="fa-solid fa-plus"></i>
</aside>

CSS 代码 #

.side {
  position: relative;
  /* 让容器宽度自动匹配图片，避免容器过宽导致图标偏离 */
  display: inline-block;
}

.side img {
  display: block;
  width: 100%; /* 可选：让图片自适应容器宽度 */
}

.side i {
  background-color: rgb(82, 79, 79);
  color: white;
  padding: 5px;
  position: absolute;
  bottom: 0;
  right: 0;
  /* 可选优化：添加圆角和鼠标悬停效果 */
  border-radius: 4px 0 0 0;
  cursor: pointer;
}

核心要点 #

1. 父容器.side设置position: relative，让内部绝对定位的元素以此为参考点。
2. 给.side加上display: inline-block，确保容器宽度和图片一致，避免图标跑到屏幕右端。
3. 图标通过position: absolute+bottom: 0+right: 0，精准固定在图片右下角。
4. Font Awesome类名注意：免费版本无fa-thin，替换为fa-solid可保证图标正常显示。

内容的提问来源于stack exchange，提问作者Sujung Lim