画像を重ねる

HTML

画像を重ねてcssのopacityをいじる必要があったので、
画像の重ね方をメモ。

ポイントは
divのstyle="position: relative;"
と
imgのstyle="position: absolute;"

<div class="navi-image" style="position: relative;">
    <img id='pic-1' src="img/1.jpg" style="position: absolute;">
    <img id='pic-2' src="img/2.jpg" style="position: absolute;">
    <img id='pic-3' src="img/3.jpg" style="position: absolute;">
    <img id='pic-4' src="img/4.jpg" style="position: absolute;">
</div>