CSS_html/css_WEB-ITnose の属性位置の詳細な説明と分析例

position には、静的、相対、絶対、固定、継承の 5 つの値があります。

static

がデフォルト値です。通常、Web ページを作成するときは、位置を指定せず、静的を使用して、上から下、左から右にレイアウトされます。

相対

レイアウト フローの外ではないため、現時点では、top、right、bottom、left 属性を使用できます。

上と下が共存する場合は、上の値を使用し、下の値を無視します。

左と右が共存する場合は、左の値を使用し、右の値を無視します。

relative は、相対的な位置を指します。要素に対する相対的な位置は静的です:

top は静的に対して下に移動するピクセル数です (top が負の値の場合は上に移動します)。

right 静的に対して左に移動するピクセル数 (right が負の値の場合は、右に移動します)。

bottom は、静的に対して上に移動するピクセル数です (bottom が負の値の場合は、下に移動します)。

left 静的に対して右にシフトするピクセル数 (left が負の値の場合は、左にシフトします)。

relative を使用した後:

元の空間は他の要素によって占有されません。

要素は、最終位置にあるとき、他の要素の上に浮いているとき、他の要素のスペースを占有しません。

absolute

レイアウト フローの外では、top、right、bottom、left を使用できますが、これらの属性は静的な位置を基準とするのではなく、含まれているブロック、その内側の端を基準とするものになります。パディングの代わりに内側のエッジの境界線。

Absolute を使用した後:

元の空間は他の要素によって占有されます。

要素は、最終位置にあるとき、他の要素の上に浮いているとき、他の要素のスペースを占有しません。

固定

モードは絶対と同じですが、スクロールバーをどのようにドラッグしても、常に画面上の指定した位置に固定されます。この属性は IE6 ではサポートされていません。この属性は IE7 ではサポートされていますが、Firefox などのブラウザではこの属性をサポートする必要があります。

top、right、bottom、left 属性はビューポートに対して相対的です。

inherit

親要素の位置の値を継承します。

名前の説明

ビューポート - ドキュメントを解析することにより、連続メディア (画面は連続メディア、プリンターはページベースのメディアなど) がビューポート (画面上に表示されるウィンドウまたはその他の領域) を生成します。ユーザー ）。