[CSS]画像を重ねる時、positionやz-indexを反射的に使っていませんか？

CSSで画像を重ねて表示させたいだけなのに、
position:rerative、absoluteやz-indexを反射的に使っていませんか？

背景画像に別の画像を単純に重ねるだけなら、
CSS1行だけで表現することができます。
もっと簡単に実装してしまいましょう！

完成イメージ

テキスト：タイトルテキスト
画像：木目調のテクスチャ
画像：猫
の3点を今回は表示します。

サンプルコード

main.html

<div class="aClass bClass">
  タイトルテキスト
</div>

テキストは、HTMLの中に直接書いています。

main.css

.aClass {
        background: no-repeat bottom right 
        url(画像のパス),
        no-repeat
        url(画像のパス);
}
.bClass {
        color: #fff;
        height: 200px;
        width: 320px;
}

画像を重ねているのは、aClassの方だけです。
１番上のurl(画像のパス),が手前に表示されます。
猫の画像をbottom rightで右下に配置しています。

bClassは、テキストの色などを指定しています。
画像の重ねるサンプルがわかりにくくなってしまうので別にしています。

[応用]画像を３つ重ねたい場合

画像を３つ重ねたい場合は、url(画像のパス)を増やすと、重ねる画像を増やすことができます。

まとめ

position:rerativeやz-indexは大変便利です。
やろうと思えばなんでも配置できてしまいます。

ただ後になって修正しようとすると、
どれが親要素で子要素なの？、画像の重ね順はどうなってるの？
と、調べる手間が発生してしまいます。

単純に重ねたいだけであれば、こういった書き方ができることも知っておくとコーディングの幅がもてます！

【参考】CSS での複数の背景の利用方法