CSS における相対配置と絶対配置: 違いと比較

CSS の世界では、さまざまな利用規約が紹介されています。 CSS は、HTML (マークアップ言語) における重要なプログラミング言語です。

これは、数人のプロのコンピューター専門家とコンピューター アナリストによって機能します。 CSS のプログラミング言語には、相対位置指定と絶対位置指定という XNUMX つの用語があります。

主要な取り組み

1. 相対配置は、他の要素のレイアウトに影響を与えることなく、元の位置を基準にして要素を移動します。
2. 絶対配置は、ドキュメント フローから要素を削除し、最も近くに配置された祖先に対して相対的に配置します。
3. 相対配置では、ドキュメント フロー内の要素の位置が維持されますが、絶対配置では、他の要素が重なったり、混乱したりする可能性があります。

相対位置と絶対位置 CSSで

相対位置は、ドキュメント内の要素の移動に関連します。 文書のレイアウトは相対的な位置関係では変わりません。 絶対位置は、異なるドキュメント内での要素の移動、またはあるドキュメントから別のドキュメントへの要素の移動に関連します。 絶対配置で文書のレイアウトを変更できます。

CSS の相対位置指定は、プログラミングにおいて (コンピューター アナリストが使用する) 最も重要な用語の XNUMX つです。

要素が元の位置から相対的に留まるように要素を移動します。 「相対的」という用語は、全体に比例して測定されるものを指します。

ドキュメントのレイアウトは変更されません。 オブジェクトを左右上下に移動します。

CSS の絶対配置は、必要な場所に要素を配置するのに役立つ貴重なタイプの位置です。

そのアニメーション タイプは離散的です (相対位置のアニメーション タイプと同様)。 この位置の g コードは G90 です。 絶対位置では、要素は常に親に対して相対的に配置されます。

このタイプの位置は、名前付き要素に適用されます。

比較表

比較のパラメータ	CSS の相対位置	CSS での絶対配置
演算	相対配置は、要素をドキュメント内の左、右、上、または下の領域に移動します。	絶対配置では、要素をあるドキュメント フローから別のドキュメント フローに移動します。
いつ使うべきか	特定のページの内部要素が絶対的に配置される場合、相対配置が使用されます。	ページの要素の内部要素が相対的に配置される場合、絶対配置が使用されます。
ネイティブに反応する	相対ポジショニングは、親に対して絶対的です。	絶対位置は、親に対して相対的です。
通常のドキュメント フロー	相対的な配置には、通常のドキュメント フローの要素があります。	絶対配置は、通常のドキュメント フローから要素を取り出します。
レイアウト	この場合、レイアウトは変更されないか、変更されません。	絶対配置の場合、レイアウトが変わりました。

CSS の相対位置とは何ですか?

CSS の相対位置は、プログラミングの世界で最も価値のある位置の XNUMX つです。

この配置は、特定の要素の内部要素を絶対に配置する必要がある場合に使用されます。

相対配置では、要素は常に親に対して絶対に配置され、通常の位置に対して相対的に配置されます。

CSS では、相対配置により、要素が左、右、下、または上に移動します。

このタイプの配置では、埋められない空きスペースやギャップが形成される可能性があります。 このタイプの配置では、レイアウトは変更されません。

「相対位置」という用語を理解するには、いくつかの詳細を理解する必要があります。 これらの詳細のいくつかを以下に示します。

• アニメーションの種類 – 個別
• 計算値 – 指定どおり
• デフォルト値 - 静的

相対配置により、要素は通常のドキュメント内に保持されます フロー. 要素の通常の位置は、静的な値と同様にドキュメント内にとどまります。 CSS は、このタイプのポジショニングに固有の責任を割り当てます。

いくつかの機能は、相対位置によって提供されます。 これらの関数のいくつかは次のとおりです。

• 要素の位置/場所を決定するのに役立ちます。
• 元の位置内で要素の位置を調整するのに役立ちます。
• 相対配置により、内部要素 (ページ要素内) を配置する力が与えられます。

CSS の絶対配置とは何ですか?

CSS の絶対配置は、ページのレイアウトを変更する独自の配置タイプです。

この配置タイプは、通常のドキュメント フローから要素を取り出します。 したがって、他の要素は、その特定の要素が存在しなかったかのように配置されます。

絶対配置では、要素は常に親に対して相対的に配置され、通常の位置に対して絶対的に配置されます。

CSS では、特定の要素のページの内部要素を相対的に配置する必要がある場合に、絶対配置が使用されます。名前付き要素では絶対配置が使用されます。

クラスまたは一般的な要素タイプでは機能しません。 このタイプの配置の主な原則は、一度に XNUMX つの要素に対してのみ機能することです。

コンピュータ アナリストや専門家の中には、絶対配置を使用して要素を中央に配置する方法を知りません。

このタイプの配置を使用して要素の中央揃えを実行する方法のいくつかの手順を以下に示します。

• 中央に配置したい要素の 50℅ に左を追加します。
• 要素の幅の半分に等しい負の左マージンを追加します。
• 次に、中央に配置したい要素の 50℅ に上部を追加します。
• 最後に、ツールの幅の半分に等しい負の上部マージンを追加します。

相対位置と絶対位置の主な違い CSSで

1. 相対配置はその親に対して絶対的ですが、一方、絶対配置はその親に対して相対的です。
2. 相対配置では、特定のドキュメント レイアウトで要素が移動します。一方、絶対配置では、あるドキュメントから別のドキュメントに要素が移動します。
3. 相対配置の場合はレイアウトは変わりませんが、絶対配置の場合はレイアウトが変わります。
4. 要素は相対的に通常のドキュメント フロー内に残りますが、一方、絶対配置では、要素は通常のドキュメント フローから取り出されます。
5. 相対位置決めでは内側要素が相対的に位置決めされ、一方、絶対位置決めでは内側要素が絶対的に位置決めされる。

参考文献

1. https://dl.acm.org/doi/abs/10.1145/1067170.1067190
2. https://link.springer.com/article/10.1007/PL00012910

最終更新日 : 26 年 2023 月 XNUMX 日