| ボックスの配置方法を指定する |
position: relative; |
position は、全てのタグ（要素）に適用できます（生成内容を除く）。 |
|
position は、ボックスの配置方法を指定するプロパティです。このプロパティで配置方法を設定しておき、top、right、bottom、left プロパティでボックスの配置位置を指定します。 |
|
div { position: relative; top: 50px; left: 50px; } |
| プロパティ名 | 値 | 説 明 |
|---|
| position |
static | 通常の位置に配置（初期値） |
| relative | 通常の位置を基準とした相対的な配置 |
| absolute |
ウィンドウまたは親ボックスを基準とした絶対的な配置 |
| fixed |
ウィンドウを基準とした絶対的な配置＋位置の固定 |
|
|
【配置方法の詳細とサンプル】 |
以下の説明に出てくる div 要素には、次の設定を行っています。 |
div { width: 100px; height: 40px; } ※ 100px×40pxのボックスを設定しています。 |
■static … 通常の位置に配置 |
通常の位置とは、本来配置されるはずの位置のことです。 |
|
<div style="backGround-color: lightblue;">ボックス1a</div> |
|
<div style="backGround-color: lightpink; position: static;">
ボックス2a</div> |
|
|
※ static を指定した場合は、ボックスの配置位置の指定は無効になります。 |
■relative … 通常の位置を基準とした相対的な配置（相対位置決め） |
本来配置されるはずの位置を基準にして、配置位置を指定する方法です。 |
|
<div style="backGround-color: lightblue;">ボックス1b</div> |
|
<div style="backGround-color: wheat; position: relative;
top: 0; left: 20px;">ボックス2b</div> |
|
|
※ 「ボックス2b」は、通常の位置から右に20pxずらしています。 |
■absolute … ウィンドウまたは親ボックスを基準とした絶対的な配置（絶対位置決め） |
祖先要素に位置決めされた要素がある場合は、その要素の位置を基準にします。それ以外の場合は、ウィンドウの枠を基準とした配置になります。 |
|
<div style="backGround-color: lightblue;">ボックス1c</div> |
|
<div style="backGround-color: lightpink; position: absolute;
top: 970px; left: 650px;">ボックス2c</div> |
|
|
※ 「ボックス2c」は、ウィンドウ枠の上端（タイトル行の位置）から 970px、左端から 650pxの位置に配置しています。このページの横幅を「広く」したり「狭く」したりしても、同じ位置に表示していることを確かめて下さい（※ 表示位置は、Internet Exp.7 に合わせています）。 |
■fixed … ウィンドウを基準とした絶対的な配置＋位置の固定（絶対位置決め） |
ウィンドウの枠を基準とした配置になります。配置位置は固定されるので、スクロールしてもその位置に表示されたままになります。 |
※ fixed の指定は、Internet Exp.6 以前では対応していません。Internet Exp.7 からは対応していますが、表示モードが「互換モード」の場合は機能しないようです。 |
|
<div style="backGround-color: lightblue;">ボックス1d</div> |
|
<div style="backGround-color: wheat; position: fixed;
top: 1215px; left: 650px;">ボックス2d</div> |
|
|
※ このページは、「標準モード」で作成している為、fixed 属性が機能しません。 |
|
| ★ 使用例とブラウザでの表示 (b6) スタイルシートの書き方（基本）は、こちら です。 |
|
設定例 ： .b6-1main { width: 300px; height: 70px; backGround-color: lightpink;
position: relative; top: 5px; left: 5px; } /* 親ボックス */
.b6-1box1 { width: 125px; height: 40px; backGround-color: lightyellow;
position: absolute; top: 15px; left: 15px; } /* ボックス1 */
.b6-1box2 { width: 125px; height: 40px; backGround-color: lightcyan;
position: absolute; top: 15px; left: 160px; } /* ボックス2 */ |
|
| 使 用 例 |
|
ブラウザの表示 |
|---|
| |
<DIV class=b6-1main>
<div class=b6-1box1>ボックス1</div>
<div class=b6-1box2>ボックス2</div>
</DIV> |
|
|
|
※ 「親ボックス」の表示位置は、ブラウザの表示欄の上端から 5px、左端から 5pxの位置に配置しています。「ボックス1」と「ボックス2」は、「親ボックス」の左上隅からの距離を指定します。 |
|
| ボックスの表示位置を指定する |
top: *px; right: *px; bottom: *px; left: *px; |
top、right、bottom、left は、位置決めされた要素に適用できます。 |
|
top、right、bottom、left は、ボックスの配置位置を指定するプロパティです。この指定は、positionプロパティで relative、absolute、fixed を指定している場合に有効になります。 |
|
div { position: absolute; top: 10px; right: 20px; bottom: 10px; left: 20px; } |
| プロパティ名 | 値 | 説 明 |
|---|
| top |
数値＋単位（px 等）
or パーセント |
上からの距離を指定 |
| right | 右からの距離を指定 |
| bottom | 下からの距離を指定 |
| left | 左からの距離を指定 |
|
各プロパティの初期値は auto（自動）です。 |
|
| ★ 使用例とブラウザでの表示 (b7) スタイルシートの書き方（基本）は、こちら です。 |
|
設定例 ： .b6-2left { width: 150px; height: 40px; backGround-color: lightgreen;
position: relative; left: 80px; }
.b6-2top { width: 150px; height: 20px; backGround-color: lightpink;
position: relative; top: 8px; left: 10px; } |
|
| 使 用 例 |
|
ブラウザの表示 |
|---|
| |
| <div class=b6-2left>ボックス-1</div> |
ボックス-1 |
|
| <div class=b6-2top>ボックス-2</div> |
ボックス-2 |
|
|
※ 「ボックス-1」はブラウザの表示欄の左端から 80pxの位置に配置され、「ボックス-2」はブラウザの表示欄の上から8px、左端から 10pxの位置に配置されます。 |
|
| ボックスの重なりの順序を指定する |
z-index: 1; |
z-index は、位置決めされた要素に適用できます。 |
|
z-index は、ボックスの重なりの順序を指定するプロパティです。この指定は、positionプロパティで relative、absolute、fixed を指定している場合に有効となります。 |
|
div { position: absolute; top: 20px; z-index: 1; } |
| プロパティ名 | 値 | 説 明 |
|---|
| z-index |
auto | 親要素と同じ階層にする（初期値） |
| 数値 |
値が大きいものほど前面（手前）に表示される（0 が基準） |
|
|
| ★ 使用例とブラウザでの表示 (b8) スタイルシートの書き方（基本）は、こちら です。 |
|
設定例 ： .b6-3 div { width: 160px; height: 50px; position: relative; }
.b6-3index1 { backGround-color: lightpink; z-index: 1; top: 10px; left: 20px; }
.b6-3index2 { border: 3px royalblue double; z-index: 2; top: -20px; left: 50px; } |
|
| 使 用 例 |
|
ブラウザの表示 |
|---|
| |
<DIV class=b6-3>
<div class=b6-3index1>ボックス-1</div>
<div class=b6-3index2>ボックス-2</div>
</DIV> |
|
|
|
※ 「ボックス-1（背景色がピンク色）」の全面（手前）に「ボックス-2（青枠の部分）」が配置されます。 |
|
