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/