坚持“新！”的最简单，最正确的方式投资组合库图像上的图标

Question

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

但是，这就是我要找的东西：

newicon http://gyazo.com/04cedd5d5c6bec5b00379415c983bbb9.png

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

最好的方法是什么？

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