「position」を使いこなすと、divボックス（ブロック要素）を画面の自由な場所に配置できるようになります。
例えば、スクロールしても常に右上や左上に表示されているバナーなどを見たことがあると思います。
或いは、スクロールしても常にサイドバーが画面右・或いは左で固定されている場合なども、ヘッダーが、マウスホイールで画面をスクロールさせても、常にヘッダーの位置で消えていかない場合なども、この「position」を利用しています。
まずは命令文を確認しておきましょう。
何が何だかよく分からないと思います。まずはこの命令文の概要を示してみます。
まずは、普通にdivボックスを表示してみます。
幅が小さめのオレンジのボックスが青いボックスの中に入っています。これが初期値「static」の状態です。
このオレンジのボックス、マージン:オートでセンタリングしたり、フロートで右（左）寄せにすることが出来ますよね。
テーブルタグ内に入れ込めば、右上、左上、右下、左下、右真ん中、左真ん中、中央上、中央下、ど真ん中…なんていう「９つ」のポジショニングも出来ます。
逆に言うと、「９つ」以外のポジショニングは出来ないと言うことですが、「position」を使えば、それが自由自在、それどころか、divボックス内から飛び出した配置さえ出来るようになります。
例えば、以下のように、もはや完全に「ブロック要素」のルールを無視した配置が出来るようになります。
■次のページはこちらです。
「relative」と「absolute」の違いと「fixed」
■メニューに戻るにはこちらから。
実用的スタイルシート入門
例えば、スクロールしても常に右上や左上に表示されているバナーなどを見たことがあると思います。
或いは、スクロールしても常にサイドバーが画面右・或いは左で固定されている場合なども、ヘッダーが、マウスホイールで画面をスクロールさせても、常にヘッダーの位置で消えていかない場合なども、この「position」を利用しています。
positionプロパティ
まずは命令文を確認しておきましょう。
| position | : | static; | 初期値 |
| relative; | 相対位置 | ||
| absolute; | 絶対位置 | ||
| fixed; | 絶対位置＆画面固定 |
| top | : | ○○px; | 上辺からの距離 |
| left | 左辺からの距離 | ||
| right | 右辺からの距離 | ||
| bottom | 下辺からの距離 |
何が何だかよく分からないと思います。まずはこの命令文の概要を示してみます。
positionとは何か？
まずは、普通にdivボックスを表示してみます。
幅が小さめのオレンジのボックスが青いボックスの中に入っています。これが初期値「static」の状態です。
このオレンジのボックス、マージン:オートでセンタリングしたり、フロートで右（左）寄せにすることが出来ますよね。
テーブルタグ内に入れ込めば、右上、左上、右下、左下、右真ん中、左真ん中、中央上、中央下、ど真ん中…なんていう「９つ」のポジショニングも出来ます。
逆に言うと、「９つ」以外のポジショニングは出来ないと言うことですが、「position」を使えば、それが自由自在、それどころか、divボックス内から飛び出した配置さえ出来るようになります。
例えば、以下のように、もはや完全に「ブロック要素」のルールを無視した配置が出来るようになります。
■次のページはこちらです。
「relative」と「absolute」の違いと「fixed」
■メニューに戻るにはこちらから。
実用的スタイルシート入門
スポンサーリンク
Thu.08.05.2010
Comment
Trackback
Trackback URL
Comment Form
質問するときは？
やっぱり自分で解決したい時
特定の記事のみでレイアウトが崩れる場合
全ページでレイアウトが崩れる場合
メールフォーム
- 不具合が出ているページのURLを書き込む。
- 使っているブラウザ（IE、Firefoxなど）を書き込む※IE6はサポート外です。
- 次の人が確認できるように、使っているテンプレートの記事ページ、或いは各カスタマイズ記事ページにコメントを書きこむ。
特定の記事のみでレイアウトが崩れる場合
全ページでレイアウトが崩れる場合
メールフォーム
