位置の違い：相??対、絶対、固定、および粘著性が、それらが要素の配置にどのように影響するかに噓をつきます。 1.親Relativeは、ドキュメントの流れに要素を保持し、それ自體に比べてそれらをシフトし、わずかな調(diào)整や子要素の位置付けコンテキストを確立するのに役立ちます。 2。絶対的な要素をフローから削除し、ドロップダウンやモーダルに最適な最寄りの位置にある祖先と比較して、それを配置します。 3.ブラウザウィンドウに関連する要素を固定し、スクロール中に所定の位置にとどまり、しばしば永続的なナビゲーションバーに使用されます。 4. Stickyは、相対的な動(dòng)作と固定動(dòng)作を組み合わせて、指定されたしきい値が満たされるまで相対的な動(dòng)作を行い、その後固定され、スクロール中に付著するヘッダーまたはサイドバーに一般的に使用されます。各方法は異なるレイアウト目的を果たし、それらの動(dòng)作を理解することは、特定の設(shè)計(jì)ニーズに合った適切なレイアを選択するのに役立ちます。

position: relative 、 absolute 、 fixed 、およびsticky 、その含有要素とブラウザウィンドウに関連して各要素がどのように配置されるかにかかっています。

それを分解しましょう。

どのようにposition: relative機(jī)能

要素をposition: relative場(chǎng)合、通常のドキュメントフローにとどまりますが、上、下、左、または右のプロパティを使用してシフトできます。重要なことは、親やビューポートではなく、それ自體に対して移動(dòng)することです。

これは、要素の位置をレイアウトから完全に引き出すことなく、わずかに調(diào)整する場(chǎng)合に役立ちます。また、設(shè)定position: relative絶対に配置された子要素の基準(zhǔn)點(diǎn)を作成します。これは、ドロップダウン、ツールチップ、またはオーバーレイを構(gòu)築するときに非常に役立ちます。

例えば：

• あなたはposition: relative
• その中に、 position: absolute
• その內(nèi)側(cè)のdivは外側(cè)のdivに対して配置されます

ただ覚えておいてください： relativeフローから要素を取り除いていないため、他のコンテンツは依然としてそれが元々の場(chǎng)所であるかのように動(dòng)作します。

どのようなposition: absolute意味があります

position: absoluteドキュメントフローから要素を完全に削除します。 static （デフォルト）以外のposition値を持つ最も近い先祖に基づいて位置付けられています。ない場(chǎng)合は、ビューポートまでずっと進(jìn)みます。

したがって、 top: 10px; left: 20pxで、上から10px、その最も近い位置にある祖先の左から20pxが表示されます。

一般的な用途：

• ドロップダウンメニュー
• モーダルウィンドウ
• ツールチップポジショニング

しかし、注意してください - 親がposition: relative （または別の非靜的な値）、あなたの要素はどこかに予期しない場(chǎng)所に現(xiàn)れるかもしれません。

position: fixed

これは、スクロールに関係なく、畫(huà)面上の同じ場(chǎng)所に固執(zhí)します。下にスクロールしても上部にとどまるナビゲーションバーを考えてみてくださいposition: fixed

ページのコンテンツではなく、ブラウザウィンドウに対して配置されています。したがって、ユーザーがスクロールしても、動(dòng)きません。

いくつかのメモ：

• absoluteなように、それはドキュメントフローから削除されます
• 周?chē)欷嗡我丐摔嫌绊懁筏蓼护?/li>
• 他の固定要素の上または下に必要な場(chǎng)合は、z-indexに注意してください

1つの一般的なゴッチャ：モバイルデバイス、特にiOSでは、ブラウザがズームとスクロールを処理する方法に応じて、固定された位置を少し違った動(dòng)作をすることができます。

どのようにposition: sticky実際に機(jī)能します

スティッキーポジショニングは、相対的で固定のハイブリッドのようなものです。ビューポートから定義されたオフセットにヒットするまで、比較的配置された要素のように機(jī)能します - その後、固定されます。

それを機(jī)能させるために：

• top 、 bottom 、 left 、またはright指定する必要があります
• それをクリップしない容器の中にある必要があります（ overflow: hidden ）
• 親コンテナ內(nèi)にのみ貼り付けます

ユースケースは次のとおりです。

• フローズンヘッダー付きのテーブル
• コンテンツのスクロール中に固執(zhí)するサイドバー
• あなたが読むときに続くナビゲーションタブ

たとえば、 position: sticky; top: 0 、スクロールセクション內(nèi)のヘッダーは、スクロールするとビューポートの上部にとどまります。

だから基本的に：

• ポジショニングコンテキストが必要な場(chǎng)合、または単に何かを少し微調(diào)整したい場(chǎng)合は、 relativeを使用してください。
• 親に対して正確に何かを配置したいときは、 absolute使用します。
• 何があっても、何かが同じスクリーンスポットにとどまるようにしたいときは、 fixed使用してください。
• 巻物に基づいて相対的なものと固定を切り替えるものが必要なときは、 sticky使用します。

それはそれについてです - あなたがそれらが動(dòng)作しているのを見(jiàn)た後、それほど悪くはありません。

以上が位置の違いは何ですか：相対、位置：絶対、位置：固定、および位置：粘著性？の詳細(xì)內(nèi)容です。詳細(xì)については、PHP 中國(guó)語(yǔ) Web サイトの他の関連記事を參照してください。