画像の重ね合わせ・重ねる順番指定(z-index)
<html> <head> <title>画像の重ね合わせ・重ねる順番指定</title> <style type="text/css"> <!-- .img1 { position: absolute; z-index: 0; top: 0px; left: 0px; border: 2px #f00 solid; } .img2 { position: absolute; z-index: 2; top: 50px; left: 150px; border: 2px #f00 solid; } .img3 { position: absolute; z-index: 1; top: 100px; left: 100px; border: 2px #f00 solid; } //--> </style> </head> <body> <img src="../../sample/img/img.jpg" class="img1" alt="画像1"> <img src="../../sample/img/img.jpg" class="img2" alt="画像2"> <img src="../../sample/img/img.jpg" class="img3" alt="画像3"> </body> </html>
〔 実行する 〕