上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
「position」を使いこなすと、divボックス(ブロック要素)を画面の自由な場所に配置できるようになります。

 例えば、スクロールしても常に右上や左上に表示されているバナーなどを見たことがあると思います。
 或いは、スクロールしても常にサイドバーが画面右・或いは左で固定されている場合なども、ヘッダーが、マウスホイールで画面をスクロールさせても、常にヘッダーの位置で消えていかない場合なども、この「position」を利用しています。


positionプロパティ


 まずは命令文を確認しておきましょう。

position:static;初期値
relative;相対位置
absolute;絶対位置
fixed;絶対位置&画面固定


top:○○px;上辺からの距離
left左辺からの距離
right右辺からの距離
bottom下辺からの距離

 何が何だかよく分からないと思います。まずはこの命令文の概要を示してみます。



positionとは何か?


 まずは、普通にdivボックスを表示してみます。



 幅が小さめのオレンジのボックスが青いボックスの中に入っています。これが初期値「static」の状態です。

 このオレンジのボックス、マージン:オートでセンタリングしたり、フロートで右(左)寄せにすることが出来ますよね。
 テーブルタグ内に入れ込めば、右上、左上、右下、左下、右真ん中、左真ん中、中央上、中央下、ど真ん中…なんていう「9つ」のポジショニングも出来ます。

 逆に言うと、「9つ」以外のポジショニングは出来ないと言うことですが、「position」を使えば、それが自由自在、それどころか、divボックス内から飛び出した配置さえ出来るようになります。

 例えば、以下のように、もはや完全に「ブロック要素」のルールを無視した配置が出来るようになります。




■次のページはこちらです。
「relative」と「absolute」の違いと「fixed」

■メニューに戻るにはこちらから。
実用的スタイルシート入門
このエントリーをはてなブックマークに追加
Thu.08.05.2010
Comment
Trackback
Comment Form
質問するときは?
  • 不具合が出ているページのURLを書き込む。
  • 使っているブラウザ(IE、Firefoxなど)を書き込む※IE6はサポート外です。
  • 次の人が確認できるように、使っているテンプレートの記事ページ、或いは各カスタマイズ記事ページにコメントを書きこむ。
コメント時の注意
やっぱり自分で解決したい時
特定の記事のみでレイアウトが崩れる場合
全ページでレイアウトが崩れる場合
メールフォーム
Bookmarks
Page Top
Copyright © SAKILab All Rights Reserved.
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。