css - 坚持“新！”的最简单和最正确的方式 投资组合画廊图像上的图标

Question

如何使用 CSS 在投资组合中更多 200x200 的图像上粘贴“新建”图标？我必须使用绝对位置吗？如果是这样，它在所有屏幕上看起来都不一样？

但是，这就是我正在寻找的：

_{（来源：gyazo.com）}

你能在第一张图片上看到新的蓝色图标吗？这就是我需要的。我需要解释如何在不使用图像裁剪的情况下完全粘贴它。

什么是最好的方法？

Answer 1

是的，您需要将其设置position为absolute- DEMO

HTML

<div class="imageholder">
  <img src="http://lorempixel.com/200/200" />
  <img src="http://placehold.it/40x40&text=NEW" class="new" />
</div>

CSS

.imageholder {
  position: relative;
}

.new {
  position: absolute;
  left: 30px;
  top: 0;
}