z-index
複数の要素が重なり合った時に、この重なる順序を指定します。
position (relative, absolute) で配置を指定し、z-index で重ね順を整数値で指定します。
数値が大きくなるほど手前に表示されます。
画面表示
左側は配置順を指定していません。右側は z-index: 1〜3を指定しています。黄色い花の画像を3に指定しているので一番手前に表示されています。
スタイルで配置方法を指定
<style type="text/css">
<!--
div { position:absolute; }
.a { top:260px; left:50px; }
.b { top:280px; left:150px; }
.c { top:330px; left:200px; }
.d { top:260px; left:550px; z-index:3; }
.e { top:280px; left:650px; z-index:2; }
.f { top:330px; left:700px; z-index:1; }
-->
</style>
HTML内の書き方
<div class="a"><img src="001.jpg" width="181" height="136" alt="黄色のコスモス"></div>
<div class="b"><img src="002.jpg" width="201" height="150" alt="葉の水滴"></div>
<div class="c"><img src="003.jpg" width="181" height="132" alt="葉の一滴の水滴"></div>
<div class="d"><img src="001.jpg" width="181" height="136" alt="黄色のコスモス"></div>
<div class="e" ><img src="002.jpg" width="201" height="150" alt="葉の水滴"></div>
<div class="f" ><img src="003.jpg" width="181" height="132" alt="葉の一滴の水滴"></div>
★画像と文字列を重ねるレイアウトをしてみよう
部屋のイラストと文字列２つに重ね順をつけてみました。
スタイルで指定
div { position:absolute; }
.gazou { top:50px;left:100px; z-index: 1 }
.iti1 { top:20px;left:50px; font-size:50px;color:#228b22; z-index: 2 }
.iti2 { top:45px;left:75px; font-size:30px;font-weight:bold;color:#ff0000; z-index: 3 }
HTML内の書き方
<div class="iti1"> My Room</div>
<div class="iti2">Let's see a dream in this room</div>
<div class="gazou"><img src="iti.png" alt="ピンクの部屋イラスト" width="300" height="165"> </div>