CSS の配置
CSS Positioning(位置決め)
CSS Position Positioning Attribute
この記事では主に要素の Position 屬性について紹介します この屬性はページ上での要素の配置方法を設(shè)定することができます。
目次
1. ポジションの概要: ポジションの値と補助屬性を紹介します。
2. 位置の位置決め方法: 位置の 4 つの位置決め方法 (絶対、相対、固定、デフォルト) を紹介します。
3. 概要ポジション: 例としてポジションを表示します。
1. はじめに
1.1 説明
Position 屬性: 要素の配置タイプを指定します。つまり、要素はドキュメント フローのレイアウトから分離され、ページ上の任意の場所に表示されます。
1.2 主な値
①absolute: ドキュメントフローのレイアウトのうち、殘りのスペースは後続の要素によって埋められます。位置決めの開始位置は最も近い親要素 (位置は靜的ではありません) であり、それ以外の場合は本文ドキュメント自體です。
②relative: 相対的な配置。ドキュメント フローのレイアウトから離脫せず、獨自の位置のみを変更し、ドキュメント フローの元の位置に空白領(lǐng)域を殘します。配置の開始位置は、ドキュメント フロー內(nèi)のこの要素の元の位置です。
③fixed: 固定位置。絶対位置と似ていますが、スクロール バーの移動に応じて位置は変わりません。
④static: デフォルト値。デフォルトのレイアウト。
1.3 補助屬性
position 屬性は、要素をドキュメント フローから取り出すだけで、この要素を希望の位置に表示したい場合は、次の屬性を使用する必要があります (position:static はこれらをサポートしません)。
①left: 要素の左側(cè)に何ピクセル挿入し、要素を右側(cè)に移動するかを表します。
②right: 要素の右側(cè)に何ピクセル挿入するか、要素を左側(cè)に何ピクセル移動するかを示します。
③top: 要素の上に挿入するピクセル數(shù)と、要素を下に移動するピクセル數(shù)を示します。
④bottom: 要素の下に挿入するピクセル數(shù)と、要素を上に移動するピクセル數(shù)を示します。
上記の屬性の値は負(fù)の値になる可能性があります (単位: px)。
position:absolute
ドキュメントフローのレイアウトのうち、殘りのスペースは後続の要素によって埋められます。位置決めの開始位置は最も近い親要素 (位置は靜的ではありません) であり、それ以外の場合は本文ドキュメント自體です。位置: 相対
位置: 相対
相対配置は、ドキュメント フローのレイアウトから離れることはなく、ドキュメント フローの元の位置に空白領(lǐng)域を殘して、獨自の位置を変更するだけです。配置の開始位置は、ドキュメント フロー內(nèi)のこの要素の元の位置です。
位置: 固定
固定位置; 絶対位置と似ていますが、スクロール バーが移動しても位置は変わりません。
実用的なアプリケーション:
①ログインボックスオーバーレイ: dzフォーラムのログインなど。
②偽のQQメッセージ広告。
位置:靜的
デフォルトの配置とは、この要素がデフォルトの配置方法であることを意味します。
実用的なアプリケーション:
IE6用の特別な処理。
スクロールバーの表示の有無
position屬性を含む要素がエッジ要素の場合:
①absoluteとrelative:これら2つの値を含むエッジ要素、ブラウザをこの位置までズームアウトするとスクロールが発生します。要素は非表示のストリップです。
②修正: この値を含むエッジ要素の場合、この要素が見えなくなるまでブラウザをズームアウトすると、スクロール バーが表示されなくなります。
りー
