CSS の配置

CSS Positioning(位置決め)

CSS Position Positioning Attribute

この記事では主に要素の Position 属性について紹介します この属性はページ上での要素の配置方法を設定することができます。

目次

1. ポジションの概要: ポジションの値と補助属性を紹介します。

2. 位置の位置決め方法: 位置の 4 つの位置決め方法 (絶対、相対、固定、デフォルト) を紹介します。

3. 概要ポジション: 例としてポジションを表示します。

1. はじめに

1.1 説明

Position 属性: 要素の配置タイプを指定します。つまり、要素はドキュメント フローのレイアウトから分離され、ページ上の任意の場所に表示されます。

1.2 主な値

①absolute: ドキュメントフローのレイアウトのうち、残りのスペースは後続の要素によって埋められます。位置決めの開始位置は最も近い親要素 (位置は静的ではありません) であり、それ以外の場合は本文ドキュメント自体です。

②relative: 相対的な配置。ドキュメント フローのレイアウトから離脱せず、独自の位置のみを変更し、ドキュメント フローの元の位置に空白領域を残します。配置の開始位置は、ドキュメント フロー内のこの要素の元の位置です。

③fixed: 固定位置。絶対位置と似ていますが、スクロール バーの移動に応じて位置は変わりません。

④static: デフォルト値。デフォルトのレイアウト。

1.3 補助属性

position 属性は、要素をドキュメント フローから取り出すだけで、この要素を希望の位置に表示したい場合は、次の属性を使用する必要があります (position:static はこれらをサポートしません)。

①left: 要素の左側に何ピクセル挿入し、要素を右側に移動するかを表します。

②right: 要素の右側に何ピクセル挿入するか、要素を左側に何ピクセル移動するかを示します。

③top: 要素の上に挿入するピクセル数と、要素を下に移動するピクセル数を示します。

④bottom: 要素の下に挿入するピクセル数と、要素を上に移動するピクセル数を示します。

上記の属性の値は負の値になる可能性があります (単位: px)。

position:absolute

ドキュメントフローのレイアウトのうち、残りのスペースは後続の要素によって埋められます。位置決めの開始位置は最も近い親要素 (位置は静的ではありません) であり、それ以外の場合は本文ドキュメント自体です。位置: 相対

位置: 相対

相対配置は、ドキュメント フローのレイアウトから離れることはなく、ドキュメント フローの元の位置に空白領域を残して、独自の位置を変更するだけです。配置の開始位置は、ドキュメント フロー内のこの要素の元の位置です。

位置: 固定

固定位置; 絶対位置と似ていますが、スクロール バーが移動しても位置は変わりません。

実用的なアプリケーション:

①ログインボックスオーバーレイ: dzフォーラムのログインなど。

②偽のQQメッセージ広告。

位置:静的

デフォルトの配置とは、この要素がデフォルトの配置方法であることを意味します。

実用的なアプリケーション:

IE6用の特別な処理。

スクロールバーの表示の有無

position属性を含む要素がエッジ要素の場合:

①absoluteとrelative:これら2つの値を含むエッジ要素、ブラウザをこの位置までズームアウトするとスクロールが発生します。要素は非表示のストリップです。

②修正: この値を含むエッジ要素の場合、この要素が見えなくなるまでブラウザをズームアウトすると、スクロール バーが表示されなくなります。