ポジションのポジショニングは、人々が好き嫌いが分かれる属性です。

CSS の位​​置属性に関しては、使用すると非常に強力な場合もあれば、非常に無力な場合もあります。

これが強力な場合、div 内の一部の小さなオブジェクトにマージンやパディングを使用するのが不便な場合は、position:absolute; を指定して、基本的にどこにでも配置できます。 。

イライラするのは、position 属性を乱用すると、レイアウトが空を飛び回ってしまい、z-index が適切に設定されていないため、基本的に全体のレイアウトが混乱してしまうことです。結局、原因を探るには、壊してやり直すしかないのではないかと思います。

そのため、position 属性を扱うときは、その動作原理と適用シナリオを詳細に理解して、使用したいときに必要な効果を達成するために完璧に操作できるようにする必要があります。

これ以上ナンセンスはやめて、すぐに手順に進みましょう まずポジションの概念について話しましょう

position、Baidu で検索してみましょう。この単語は CSS では位置を意味し、属性値は static (デフォルトの位置)、absolute (絶対) の 5 つです。ポジショニング) )、relative (相対ポジショニング)、fixed (固定ポジショニング)、inherit (継承されたポジショニング、一般的には使用されません)。

書き方ルール:

各属性値を紹介しましょう

1.position:static (デフォルトの位置決め)

名前が示すように、通常、ドキュメント フロー内の各 div のデフォルト レイアウトは静的属性値であり、div や他の要素がドキュメント フローから切り離されることはありませんが、レイアウトの原則に従います。上から下へ。ブロックレベルの要素には行の折り返しがあり、インライン要素には行の折り返しがないなどの一般的な原則があるため、位置決め属性を使用しない場合は、この位置を設定する必要はありません。

2.position:relative (相対位置決め)

相対的な配置は、それ自体がドキュメントフローから離れることはないと見なされます。つまり、この属性を要素に設定すると、このファイルはこのドキュメントストリーム内で前後に移動します。移動方法については後で説明します。

3.position:Absolute (絶対位置決め)

。

親要素内のすべての子要素が絶対に設定されている場合、すべての子要素は浮動してから積み重ねられるため、各要素を広げて表示するには、これらの要素を移動する必要があります。これらの要素、つまりスタイルシートに直接記述するのは、left、right、top、bottom の 4 つの属性であり、属性の後に px (ピクセル)、% (パーセンテージ) などの距離を表すことができる単位を記述します。 ここで強調したいのは、左右を同時に使用することはできず、上下を同時に使用することもできないということです。 そして、これら 4 つの要素はすべて、相対位置決め (relative) 属性によって親要素に対して相対的に移動されます。親要素に相対位置が設定されていない場合、絶対位置は本文に対して相対的に設定されます。 そこで、設定した要素が暴走しないように、親要素に対して相対的に設定することを忘れないようにしましょう。

4.fixed（固定位置）

この配置はブラウザウィンドウに対する相対的な配置であり、移動方法は相対配置と絶対配置と同じです。 一般的なサイドバーや広告画像もこの機能を使って実装されます。非常に実用的で強力な機能です。

5. Inherit（位置の継承）は親要素から位置の位置属性を継承するものですが、あまり使われません。

そういえば、私たちは

z-index

（レベル）の問題に関わっています。先ほど述べたように、すべての子要素にAbsolute が設定されている場合、すべての子要素は一緒にスタックされ、互いに覆われます。 1つの要素に複数のレイヤーを重ねる必要がある場合、それらを並べ替えるにはどうすればよいですか？これには、z-index 属性を使用する必要があります。

z-index属性の属性値は数値です。数値が大きいほど、より正確になります。たとえば、

z-index=0の要素はz-index=1の下に表示され、z-index=10の要素はz-index=8の上に表示されるので、その表示順序を重ねて z-index を設定するだけです。

もちろん、z-indexが設定されていない場合、デフォルトでは、後の要素が前の要素をカバーします。

使用時の注意点:

1. float 属性は、position 属性と共有できないので、覚えておいてください。

2. 絶対を使用する場合は、親要素に対して相対を忘れずに追加してください

3. 左と上の他に、右と下もありますので、覚えて使ってください

4. 位置が必要ない場合は、位置を使用しないでください。結局のところ、レイアウトは簡単に崩れます。 5. Javascriptでpositionを呼び出す方法は、 div.style.positio="absolute" と同様ですが、divは変数名です。

上記はポジションの基本について簡単に説明したものですが、ここで必要な答えが得られない場合は、以下にメッセージを残していただければ積極的に返信します。

最後に、積極的にコミュニケーションをとり、一緒に進歩していきましょう！