CSSのposition属性

CSS レイアウトでは、位置は非常に重要な役割を果たします。多くの Web ページのレイアウトは位置を使用して完成する必要があります。 Position には、静的、絶対的、相対的、および固定の 4 つの属性値があります。

静的

この属性はデフォルトの位置を表します。通常の状況では、この属性を設定する必要はありません。

絶対

この属性は絶対位置を表します。絶対配置された要素は、最も近い配置された祖先を基準にして配置されます。要素に配置された祖先がない場合、その位置は元の包含ブロックを基準に配置されます。通常のドキュメント フローで要素が以前に占めていたスペースは、その要素が存在しないかのように閉じられます。たとえば、前のブロックが絶対位置指定を使用し、次のブロックが設定されていない場合、2 つのブロックは重複します。ブロックレベルのボックスは、通常のフローで最初に生成されたボックスのタイプに関係なく、要素が配置されるときに生成されます。たとえば、要素を絶対的に配置し、垂直または水平位置を設定して開始点に対して相対的に移動します。

top を 10px に設定すると、ボックスはそれを含むコンテナーの上部から 10 ピクセル下になります。 left が 10 ピクセルに設定されている場合、ボックスはコンテナーの左境界線に対して 10 ピクセル右に移動します。

親戚

この属性は相対位置を表します。相対位置に設定された要素フレームは、一定の距離だけオフセットされます。要素は配置されていない形状を保持し、要素が元々占有していたスペースも保持されます。

要素を相対的に配置する場合は、垂直または水平の位置を設定することで、要素を開始点に対して相対的に移動できます。

上部を 20 ピクセルに設定すると、ボックスは元の位置の上部から 20 ピクセル下になります。 left を 30 ピクセルに設定すると、要素の左側に 30 ピクセルのスペースが作成され、要素が右に移動します。

修正されました

この属性は固定位置を表し、トップが 20 ピクセルに設定されている場合、ボックスはウィンドウの上部から 20 ピクセル下になります。同じ位置が適用されます。パーセンテージで表すことができます。

その効果は、ブラウザのスクロール バーがどのように引っ張られても、この属性で設定された要素の位置は変更されないことです。

次のコードは、位置決めを使用して作成したレイアウトです。その効果は次のとおりです:

位置のいくつかの属性を柔軟に使うことができれば、美しく美しいレイアウトをたくさん作ることができます。