ホームページはhtmlで書いた通り上から順に表示されますが、配置を使うことでコンテンツ、画像などを思い通りの位置に配置することができます。
その方法には、絶対配置（absolute）と相対配置（relative）の2通りがあります。
それでは、相対配置から見てみましょう。
相対配置
まず、画像を見てください。
黒枠はbody、中央はcontainerで、画像が上から3枚、htmlの順に並んでいます。
htmlソース
<body>
<div id="container">
<div class="sample_1">
<p>sample_1</p>
</div>
<div class="sample_2">
<p>sample_2</p>
</div>
<div class="sample_3">
<p>sample_3</p>
</div>
</div><!--container-->
</body>
cssソース
/*====css参考====*/
.sample_1,.sample_2,.sample_3 {
width:100px;
height: 100px;
}
.sample_1 {
background: yellow;
}
.sample_2 {
background: yellowgreen;
}
.sample_3 {
background: green;
]
sample_1
sample_2
sample_3
sample_1を現在の位置から左へ110px、下へ20px配置を変えてみましょう。
sample_1のスタイルに3行追加しました。
cssソース
/*====css参考====*/
.sample_1 {
background: yellow;
position: relative; /*追加*/
left: 110px; /*追加*/
top: 20px; /*追加*/
}
positionは要素の位置を決めるプロパティです。
値relativeは現在の位置から相対的に移動します。
そして、移動位置を書きます。
left,right,top, bottom左右と上下の組み合わせは自由です。
sample_1
sample_2
sample_3
値の移動数字をマイナスにすると反対方向へ配置します。
sample_2も左へ20px、上へ40px配置を変えてみましょう。
sample_2のスタイルに3行追加しました。
cssソース
/*====css参考====*/
.sample_2 {
background: yellowgreen;
position: relative; /*追加*/
left: 20px; /*追加*/
top: -40pxpx; /*追加*/
}
sample_1
sample_2
sample_3
後から配置したsample_2がsample_1の上になりました。
重なり合った場合は後から配置された要素が上に表示されます。
z-index
下になったsample_1を上にすることができます。
平面上の交軸はX軸、Y軸で表され、Z軸を直角に立てることで立体が表示できます。
Z軸を指定することにより、sample_1を上にすることができます。
では、やってみましょう。
sample_1のスタイルにZ軸を追加します。
Z軸の値が大きいほど上に表示されますので、zの値を1にします。
cssソース
/*====css参考====*/
.sample_1 {
background: yellow;
position: relative;
left: 110px;
top: 20px;
z-index: 1; /*追加*/
}
sample_1
sample_2
sample_3
sample_2はZ-indexを書いてありませんからデフォルトでz-indexは0、sample_1はz-indexを1にしましたので、数字の大きいsample_1がsample_2の上に表示されました。
次は配置-絶対配置