簡単に画像Aに画像Bを上書きする方法

画像Aに画像Bを上書きする方法についてです。
色んな方法がありますが、私が好きな方法を紹介します。

hoge.html

<div class="relative">
  <img src="A.jpg">
  <img src="B.jpg" id="uwagaki">
</div>

画像Aと画像Bをdivでくるみます。

hoge.css

#uwagaki {
    position: absolute;
    top:0;
    left:0;
}
.relative {
    position: relative;
}

次にcssでpositionをうまく使って、画像を重ねます。
画像Aと画像Bのサイズが同じ場合, これだけでピッタリと上書きさせることができます.

画像Bでposition:relative;を使うと画像の分のスペースが空いてしまうので注意.

この方法はbootstrapで書いている場合でもちゃんと上書きしてくれます.