|
{position:配置方法; 位置:値;}でボックスの配置方法を指定する
ことができます。
■ ボックスの配置方法
ボックスの配置方法と指定できる位置は以下のように
なります。
| ボックスの配置方法 |
説明 |
|
static
|
ボックスをデフォルトの位置に表示します。 |
|
relative
|
ボックスを通常の位置を基準とした相対的な位置に表示します。 |
|
absolute
|
ボックスを画面全体又は親要素（親ボックス）を基準とした絶対的な位置に表示します。
親ボックスにposition:relativeかposition:absolute
が指定されている場合
は親ボックスの左上が基準の位置となります。
親ボックスに
position:staticだけが指定されている場合
は画面左上が基準の位置となります。
|
| 位置 |
説明 |
|
top
|
上からの位置（距離）を指定します。 |
|
right
|
右からの位置（距離）を指定します。 |
|
bottom
|
下からの位置（距離）を指定します。 |
|
left
|
左からの位置（距離）を指定します。 |
【ブラウザ表示】
ボックスの配置方法は通常の位置です。
ボックスの配置方法はすぐ上のボックスを基準とした相対的な位置で下からの
距離40px、左からの
距離200pxです。
ボックスの配置方法は画面左上を基準とした絶対的な位置で上からの距離960px、左からの
距離160pxです。
ソース
<p class="haichi1">
ボックスの配置方法は通常の位置です。
</p>
<p class="haichi2">
ボックスの配置方法はすぐ上のボックスを基準とした相対的な位置で下からの
距離40px、左からの
距離200pxです。
</p>
<p class="haichi3">
ボックスの配置方法は画面左上を基準とした絶対的な位置で上からの距離960px、左からの
距離160pxです。
</p>
外部ファイル
p.haichi1{
position:static;
border:1px solid;
width:200px;
}
p.haichi2{
position:relative;
border:1px solid;
bottom:40px;
left:200px;
width:200px;
}
p.haichi3{
position:absolute;
border:1px solid;
top:960px;
left:160px;
width:200px;
}
<body>～</body>に直接記入する場合
<p style="position:static; border:1px solid; width:200px;">
ボックスの配置方法は通常の位置です。
</p>
<p style="position:relative; border:1px solid; bottom:40px; left:200px;
width:200px;">
ボックスの配置方法はすぐ上のボックスを基準とした相対的な位置で下からの
距離40px、左からの
距離200pxです。
</p>
<p style="position:absolute; border:1px solid; top:960px; left:160px; width:200px;">
ボックスの配置方法は画面左上を基準とした絶対的な位置で上からの距離960px、左からの
距離160pxです。
</p>
■ 大きいボックスの中に小さいボックスを配置する場合
大きい親ボックスの中に小さい子ボックスを配置すると下のようになります。
【ブラウザ表示】
横幅400pxの親BOX
この子ボックスの配置方法は親ボックスの左上を基準とした相対的な位置で親ボックスの下からの距離5px、左からの距離60pxです。
この子ボックスの配置方法は親ボックスの左上を基準とした絶対的な位置で親ボックスの上からの距離50px、左からの距離206pxです。
ソース
<DIV class="oyabox">
<div class="kidsbox1">
この子ボックスの配置方法は親ボックスの左上を基準とした相対的な位置で親ボックスの下からの距離5px、左からの距離60pxです。
</div>
<div class="kidsbox2">
この子ボックスの配置方法は親ボックスの左上を基準とした絶対的な位置で親ボックスの上からの距離50px、左からの距離206pxです。
</div>
</DIV>
外部ファイル
div.oyabox{
position:relative;
border:1px solid;
left:100px;
width:400px;
background-color:#FFE4C4;
}
div.kidsbox1{
position:relative;
border:1px solid;
bottom:5px;
left:60px;
width:150px;
background-color:#99CCFF;
}
div.kidsbox2{
position:absolute;
border:1px solid;
top:50px;
left:206px;
width:150px;
background-color:#CCCC99;
}
<body>～</body>に直接記入する場合
<DIV style="position:relative; border:1px solid; width:400px; left:100px; background-color:#FFE4C4;">
<div style="position:relative; border:1px solid; left:60px; bottom:5px; width:150px; background-color:#99CCFF;">
この子ボックスの配置方法は親ボックスの左上を基準とした相対的な位置で親ボックスの下からの距離5px、左からの距離60pxです。
</div>
<div style="position:absolute; border:1px solid; top:50px; left:206px; width:150px; background-color:#CCCC99;">
この子ボックスの配置方法は親ボックスの左上を基準とした絶対的な位置で親ボックスの上からの距離50px、左からの距離206pxです。
</div>
</DIV>
■ その他の項目
・
枠線の太さを指定する
・
枠線の種類を指定する
・
枠線の色を指定する
・
個別の枠線を一括に指定する
・
ボックスの横幅、高さを指定する
・
外側、内側の余白を指定する
・
背景色や画像を指定する
・
背景画像の表示方法を指定する
・
背景画像の表示位置を指定する
・
ボックスを並べる
・
はみ出る部分を表示させる
・
背景画像の表示領域を指定する
・
枠線の4隅の角丸を指定する
・
枠線の4隅の角丸を個別に指定する
スタイルシート一覧のページに戻る
|
