css - 仅通过使用类来通过 CSS 重叠图像？

Question

请看一下这个：

<div class="box photo col2 normaloffer">

css（简化）如下：

.box {
  margin: 5px;
  padding: 5px;
  font-size: 11px;
  line-height: 1.4em;
  float: left;
  border:1px solid #DFDFDF;
  -webkit-border-radius: 5px;
     -moz-border-radius: 5px;
          border-radius: 5px;
}

.normaloffer {
    background: #D8D5D2;
}

.col2 { width: 180px; }

呈现：

好吧，我需要在每个图像的顶部中心重叠一个图像，我知道制作一些 div 并安排它们我可以做到这一点，但我想知道，我可以使用一个类来做这个吗？因为我有时想重叠图像，有时不重叠。就像是：

<div class="box photo col2 normaloffer OVERLAP">
.OVERLAP { // no idea what to put in here, is possible? }

编辑 结果：

Answer 1

您可以使用 :after 伪类在 div 内部创建一个元素，并将其放置在绝对定位中。

.overlap {
    position:relative;
}

.overlap:after {
    content:' ';
    position:absolute;
    top:0;
    left:60px;
    width:60px;
    height:60px;
    background:url("http://placekitten.com/60/60") no-repeat center center red;
}

请参阅工作示例：http: //jsfiddle.net/WpBKr/