簡潔な CSS プロパティ:positioning_html/css_WEB-ITnose

/* 非常に簡単なので無視してください*/

Positioning

キーワード:position/z-index/top/bottom/right/left/clip

POSITION

この属性は、オブジェクト上の要素の位置を決定します。ページ。 使用法: 位置: 固定 (デフォルト) | 相対 | 絶対

静的

通常のドキュメント フローに従い、上、下、左、右の値を設定しません。

修正済み

通常のドキュメント フローから逸脱し、完全にブラウザ ウィンドウを参照として使用し、マウスのスクロールに合わせてスクロールしません。 tblr値を設定します。

相対的

何と相対的ですか?ドキュメント フロー内の要素の元の位置を基準にしてオフセットされます。

つまり、ドキュメント フローに従って A にある必要があり、相対属性と left=10px が設定されている場合、最終的な位置は次のようになります: A は 10px だけ右にオフセットされます。

もちろん、この要素のサイズは変更されないため、他のボックスを覆います。

アプリケーション: 相対位置決め値を持つ要素は、通常、絶対位置決め値を持つ要素の親コンテナとして使用されます。

絶対

なぜ絶対と呼ばれるのでしょうか?要素は位置を指定する必要があるため、コンテナの内側から外側に向かって「絶対に」検索し、position 属性が設定された要素を探す必要があります (デフォルト値の static はカウントされません)。 つまり、X が絶対位置決めに設定されている場合、位置決めするときは、X の親 Y が絶対位置決めであるかどうかによって決まります。 Y の親 Z が位置を設定しているかどうかを引き続き確認します。設定されていない場合は、位置決めのベースとして html 要素を使用します。 この要素は、通常のドキュメント フローから切り離されています。したがって、他のボックスが覆われてしまいます。

アプリケーション: 絶対配置属性を設定するだけで、要素を Web ページの任意の部分に配置できます。 (もちろん、親戚の親を基準にするのも良いです)

いいですね。ポジションのいくつかの値を紹介した後、カバレッジという言葉が上で何度か言及されました。

それでは、要素が重なったときに誰が上がるか、誰が下がるかをどのように決定するのでしょうか?ここでは、z-index 属性が導入されています。

Z-INDEX

各要素の Z-index に値を割り当て、それらが重なった場合に、大きい方を上に、小さい方を下に比較します。 使用法: z-index: auto (デフォルト) | 正/負の値 | 継承 使用法: 要素を配置するためにのみ使用できます (つまり、position 属性値が設定されます)

auto

親要素と一致するデフォルト値。

inherit

親要素から継承する必要があることを明示的に示します。

注: インデックス値が同じ場合、重なり順はドキュメント フロー内での出現順序に基づいて決定され、後のものが優先されます。

それから、上/下/左/右があります。

上/下/左/右

オフセットを設定します。 使用法: top: auto (デフォルト) |value|percentage 使用法: 位置決めされた要素のみ。

値はpxなどで直接表現されます。パーセンテージは親コンテナに対する相対的なものです。

例えば、left=50% の位置決め要素の場合 (画像に限定されません)。 使用法: クリップ: 自動 (デフォルト) | 長方形 (上、右、下、左) 使用法: 属性がposition:absolute && overflow !=可視である要素にのみ使用されます。

auto はトリミングしません

rect の 4 つのパラメータはピクセル値です。 4 つの値はすべて、画像の左上隅の (0,0) 点を基準としています。

たとえば、画像の元の幅が 100px で、rect に right=10px が設定されている場合、トリミング後の画像の幅は 10px になります。右マージンが左に 90px 移動されました。

------------------------------------- ---- ------------

位置決めはここで終了です。