[PR] 容量300MB、月額125円、高性能なサーバが日本最大級のバックボーンに直結。さくらのレンタルサーバ。
重なる順番をコントロールしよう！
サンプルとして、ブラウザのウィンドウ枠に見立てたグレーの枠の中に、縦50ピクセル、横100ピクセルのボックスを４つ並べました。<DIV>要素は前後に改行が入るブロックレベル要素なので、デフォルトでは以下のように縦に並びます。
＜サンプルコード＞
<div style="width:100px; height:50px;">div001</div>
<div style="width:100px; height:50px;">div002</div>
<div style="width:100px; height:50px;">div003</div>
<div style="width:100px; height:50px;">div004</div>
デフォルトでは記述順に重なる！
各ボックスを絶対指定で重なるように配置すると、デフォルトでは記述順に重なっていきます。つまり、ソースコードを後に記述した方が前に来ることになります。
＜サンプルコード＞
<div style="width:100px; height:50px;">div001</div>
<div style="width:100px; height:50px;
position:absolute; top:35px; left:20px;">div002</div>
<div style="width:100px; height:50px;
position:absolute; top:70px; left:40px;">div003</div>
<div style="width:100px; height:50px;
position:absolute; top:105px; left:60px;">div004</div>
重なる順番を調整するには？
絶対指定で重ねた各ボックスの重なり順を変えるには、スタイルシートの「z-index」プロパティを使用します。このプロパティの値の大きい順に前面に表示されます。つまり、一番前に表示したいブロックは一番大きい値を設定してやれば良いことになります。
＜サンプルコード＞
「z-index」プロパティの値の単位は10でなくても構いません。
<div style="width:100px; height:50px;
position:absolute; z-index:100;">div001</div>
<div style="width:100px; height:50px;
position:absolute; top:35px; left:20px; z-index:90;">div002</div>
<div style="width:100px; height:50px;
position:absolute; top:70px; left:40px; z-index:80;">div003</div>
<div style="width:100px; height:50px;
position:absolute; top:105px; left:60px; z-index:70;">div004</div>
