CSS の position プロパティを使ったレイアウトをお勉強中です。
この方法の利点は、HTML の出現順に左右されないレイアウトができる所です。例えば、HTML の末尾に書いた内容をページの一番上に配置することができます。
以下、簡単にまとめてみました。間違ってたらゴメンナサイ。
## プロパティのキーワードについて
| キーワード | 意味 | 配置位置 |
|---|---|---|
| absolute | 絶対配置 | 直前（上位）ブロック要素の左上を基点に絶対配置 |
| relative | 相対配置 | 通常の出現位置（ソース上で書かれた所）を基点に相対配置 |
| static | 通常配置 | 通常の出現位置（ソース上で書かれた所）を基点に通常配置 |
| fixed | 固定配置 | ブラウザの左上を基点に固定配置（スクロールの影響を受けない） |
最後にソースの書き方によって、基点がどう変わるかのサンプルです。
サンプルコード
———————————————————————-
.Layer1 {
position: relative;
top: 0px;
left: 0px;
width: 600px;
height: 400px;
border: 1px solid red;
}
.Layer2 {
position: absolute;
top: 0px;
left: 300px;
width: 300px;
height: 400px;
border: 1px solid blue;
}
.Layer3 {
position: absolute;
top: 200px;
left: 0px;
width: 300px;
height: 200px;
border: 1px solid orange;
}
上の HTML ソースは以下の様になっています。
<div id="Layer1"></div>
<div id="Layer2"></div>
<div id="Layer3"></div>
Layer3 は Layer1 を基点として配置されます。
.Layer1 {
position: relative;
top: 0px;
left: 0px;
width: 600px;
height: 400px;
border: 1px solid red;
}
.Layer2 {
position: absolute;
top: 0px;
left: 300px;
width: 300px;
height: 400px;
border: 1px solid blue;
}
.Layer3 {
position: absolute;
top: 200px;
left: 0px;
width: 300px;
height: 200px;
border: 1px solid orange;
}
上の HTML ソースは以下の様になっています。
<div id="Layer1">
<div id="Layer2">
<div id="Layer3">
</div>
</div>
</div>
Layer3 は Layer2 を基点として配置されます。
実際の動作サンプル
———————————————————————-
– サンプル
border の 1px 分、width と height を調節しないと、はみ出しちゃいますね。WindowsのIEだと、見え方が違うのでしょうか？
あっ！ホントだ！
テストだと思って適当に書いてます。ゴメンナサイ…。
ご指摘ありがとうございます。