DIV レイアウトにおける位置属性の 4 つの主な用途

position属性のpレイアウト属性を正しく使いましょう

Positionの本来の英語の意味は、位置、地位、ステータスを指します。配置という意味もあります。 CSS レイアウトでは、Position が非常に重要な役割を果たしており、多くのコンテナの配置は Position を使用して完了します。

Position 属性には、静的、絶対的、固定、相対的な 4 つのオプションの値があります。それぞれの使い方を一緒に学び、どのようなレイアウトでどちらを使用するかを考えてみましょう。
Position属性の詳細については、こちらを参照してください。

◆P レイアウト属性 Position:static 位置決めなし

この属性値は、すべての要素のデフォルトの位置決めです。通常の状況では、特に宣言する必要はありませんが、継承が発生する場合があります。要素によって継承された属性がそれ自体に影響を与えることを確認するには、position:static を使用して継承をキャンセルします。つまり、要素の位置のデフォルト値を復元します。
例: #nav{position:static;}

◆Pレイアウト属性position:absolute 絶対配置

position:absoluteを使用すると、要素を希望の位置に非常に正確に移動できます。ページの右上隅にあります。次のように記述できます: nav{position:absolute;top:0;right:0;width:200px;}
絶対位置を使用する nav レイヤーの前または後ろのレイヤーは、このレイヤーが存在しないと見なします。 、z 方向では比較的独立しており、他の z 方向のレイヤーにはまったく影響を与えません。そのため、position:absolute は要素を固定位置に配置する場合には最適ですが、近くのレイヤーに対する相対的なレイヤーの位置を決定する必要がある場合には機能しません。以下で説明するように、相対位置指定のみを使用できます。 ここで言及する必要がある WinIE のバグがあります。つまり、絶対配置された要素の相対幅を定義した場合、IE でのその幅はページ全体の幅ではなく親要素の幅に依存します。

◆Pレイアウト属性position:fixed ウィンドウを基準とした固定位置です

この位置属性値は何を意味しますか？要素は絶対と同様に配置されますが、その要素を含むブロックはビューポート自体です。 Web ブラウザなどの画面メディアでは、ドキュメントをスクロールしても要素はブラウザ ビュー内で移動しません。たとえば、フレーム スタイルのレイアウトが可能になります。印刷物などのページ媒体では、最初のページの同じ位置に固定要素が表示されます。これを使用して、流れるようなタイトルや脚注を生成できます。同様の効果を確認しましたが、そのほとんどは CSS ではなく、JS スクリプトを使用して実現されています。

IE6 は CSS の Position:fixed 属性をサポートしていないことに注意してください。本当に残念です。そうでなければ、このクールなエフェクトを試すことができたのに。

◆Pレイアウト属性position:relative 相対位置決め

相対位置決めとは正確には何を意味しますか? 相対位置決めはどこに基づいていますか?概念を明確にする必要があります。相対配置とは、要素のデフォルトの位置を基準にして配置することです。相対的なので、どこに配置するかを宣言するために異なる値を設定する必要があります。上、下、左、右の 4 つの値が連携して要素の位置を明確にします。 nav レイヤーを下に 20 ピクセル、左に 40 ピクセル移動したい場合:
次のように記述できます: #nav{position:relative;top:50px;left:50px;}
ただし、次の状況に注意する必要があります。 、相対的な位置はそれに追従します woaicss レイヤーはナビの下には表示されませんが、ある程度ナビと重なります。

以上がDIV レイアウトにおける位置属性の 4 つの主な用途の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。