css_html/css_WEB-ITnoseのposition属性の詳細説明

最近、Furui のインターフェースをペイントしていたとき、(位置属性を詳しく知る前に) 多くの要素の位置決めが問題でした。

その後、オンラインで位置に関するいくつかの関連属性を確認しました。

position: 属性: 要素の固定配置タイプ。つまり、要素はドキュメントのレイアウト フローから分離され、要素上の任意の場所に表示されます。

位置の属性値は次の 4 種類があります:

1. 静的: デフォルト レイアウト (デフォルト値)

2.固定位置 は、その名前が示すように、固定を意味し、絶対位置と似ていますが、絶対よりも「固定」です。 (スクロールバーではスクロールしません)

3. 相対: ドキュメントのレイアウトフロー外の相対的な配置ですが、ドキュメントの元の位置に空白スペースが残ります

4. 絶対: 絶対配置。ドキュメントのレイアウト フローから切り離され、ドキュメント内の位置を残しません。

以下は、これらの配置方法の簡単な紹介です:

1. static

このレイアウトはデフォルトのレイアウトなので、誰もがよく知っていると言えます

これは、要素が配置されていない場所に表示されることを意味します。ドキュメントに表示される必要があります

b、l）ポジショニングを実行するには、

スクロールがfalseに設定されている場合、このポジショニングは非常に混乱します！ 、多くの Web サイトの広告は次のようなものです

実際、オンラインでそれを言うのは非常に面倒なように感じますが、私の理解では、固定とは、この要素を画面上のこの位置に固定し、他のことは気にしないことを意味します。単純かつ粗雑)

要素自体の物理空間は自然に消えます

は、相対とは異なり、元の物理的位置が残ります

親の場合(infinite) が位置属性を設定しない場合、現在の絶対値は、親 (最も近い) の左上隅と TRBL 属性を組み合わせます。

位置:相対が設定されている場合、親 (最も近い) コンテンツ領域の左上隅が元の点として参照され、位置決め用の TRBL 属性と結合されます (または、位置決めされた要素の前の位置を基準にします)親コンテンツ領域の要素はオフセットされます)、親がない場合は、BODY の左上隅が元の点として使用されます。相対位置決めは積み重ねることができません。相対配置を使用する場合、要素が移動されるかどうかに関係なく、要素は元のスペースを占有します。したがって、要素を移動すると、他のボックスが覆われてしまいます。

一般に、センタリング効果に絶対を使用すると間違いが起こりやすくなります。これは、ページが常に解像度のサイズに自動的に適応するためです。

また、絶対は左上隅を使用します。解像度の変化によって原点の位置が変わることはありません。場合によっては、コンテナーの上下の関係を設定するために z-index に依存する必要があります。値が大きいほど、上部が高くなります。

値の範囲は自然数です。もちろん、注意すべき点は、z-index を使用して親子関係を上下に設定することはできないということです。子が上に、親が下になければなりません。

絶対的に配置されたオブジェクトに続くテキストまたはオブジェクトは、配置されたオブジェクトが通常のドキュメント フローからドラッグされる前に、その自然なスペースを占有します。

絶対に配置されたオブジェクトを表示領域の外側に配置すると、スクロール バーが表示されます。ただし、相対的に配置されたオブジェクトが表示領域外に配置されている場合、スクロール バーは表示されません。

4.relative (私の理解があまり徹底していないような気がします)

アプリケーションの観点から見ると、relative は絶対要素を含むコンテナ要素に対してよく使用されます。絶対要素は、デフォルトで絶対配置のコンテナ要素として body を使用します。

ページの特定の領域を絶対的に配置したい場合は、絶対要素の周りにコンテナ要素をラップし、相対スタイルを適用できます。

比喩的に言えば、相対配置は非常に利己的です。

その最大の特徴は、配置中に逃げて元の位置を占有し、周囲のテキストの流れにそれを与えないことです。そういったオブジェクトなど。

相対位置決めも比較的独立しています。位置決めの際に、それ自体の位置によって (オブジェクト自体に対して) オフセットされます。

相対について理解する必要がある最も重要なことは、それ自体に対して相対的に配置されるということです。つまり、

相対はそれ自体に対して相対的に配置されます。たとえば、 #demo{position:relative; top:- 50px;} とすると、#demo は元の位置に対して 50px 移動します。

「相対的な」または「絶対」設定の場合、絶対に位置する要素の参照は1つのポイントを強調するためです。親要素

例をあげてください (オンラインで見つけました。とても良さそうです)

(写真を載せられないのが残念ですが、

上の図は「相対」と「絶対」の関係を説明するための例です。まず、上の図の body には 3 つの div が配置されています。 🎜>

そして、それらの 3 つの div 間の関係は "div-1> div-2> div-3" であり、div-3 にはそのような絶対的な位置があります:

以下は次のとおりです。上の図の意味を説明するために、いくつかの状況を示します。

1. div -1 にも div-2 にも「position:relative」が設定されておらず、この時点では div-3 は絶対位置に設定されていません。上の図の「div-3c」の位置;

2. ここで、div-2 要素に「position:相対」を設定します。は絶対配置され、上の図の「div-3a」の位置に移動します。

.div-3 {                position: absolute;                left:0;                top:0;            }

3. 次に、このときの相対配置の設定を div-1 要素に変更します。 , 絶対配置後は div-3 は div-3b の位置になります。

これだけの時間を費やしたので、1 点だけ説明したいと思います。要素が絶対的に配置されている場合、その参照は、それ自体に最も近い要素が相対的な配置を持っているかどうかに基づいています。

設定がある場合は、それ自体に最も近い要素が配置されます。設定がない場合は、html が見つかるまで、相対配置要素がその祖先要素内で検索されます。