html - 3層でHTML/CSSブロックを進める

Question

画像のようなブロックを構築しようとしています。3 つ以上のブロックを持つ 1 つのストリップがあります。すべてのブロックの下に数字 (コンテンツ: カウンター ?) を配置しました。すべてのブロックには独自の背景があるかもしれませんが、それでも番号を見たいです。そのように考えてプリフォームする方法はありますか？z-index を使用しようとしましたが、うまくいきませんでした。

フィドルのリンク

  .element:before{
    content: counters(el-list, "") ". ";
    font-size: 40px;
    z-index:2;
    color:#fff;
    position:absolute;
    margin-left:-10px;
  }

.element{
    height:50px;
    background:#333;
    margin:10px;
    width:50px;
    float:left; 
    counter-increment: el-list;
     z-index:3;
}