相対的なポジショニング-CSSチュートリアル-php.cn

相対的なポジショニング

Christopher Nolan

リリース： 2025-02-26 09:06:11

オリジナル

499 人が閲覧しました

Relative Positioning

要素の属性をpositionに設定すると、そのレイアウトはrelative要素と同じです。レンダリングされたボックスは、staticまたはtop属性に基づいて垂直に移動します。 bottom、left、right、top、right、bottomプロパティは、レンダリング後にボックスが移動する距離を指定するために使用されます。正の値は、ボックスがその位置から離れて反対方向に移動することを示します。たとえば、leftボックスを右に20ピクセルに移動します。反対方向に負の値を適用すると、同じ効果が得られます。left: 20pxと同じ効果があります。これらのプロパティの初期値はright: -20pxであり、計算値0（ゼロ）を作成します。つまり、動きは発生しません。明らかに、同じ要素に対してleft: 20pxとautoを指定することは意味がありません。位置は過剰に制約されるためです。コンテンツの方向が左から右にある場合、left値が使用され、rightは無視されます。右から左の方向に、left値「勝ち」。 rightとrightの両方が指定されている場合、topが使用され、bottomは無視されます。配置要素と比較してレンダリングされたボックスのみが移動するため、この位置決めスキームはコンテンツ列をレイアウトするのに実用的ではありません。より複雑なレイアウトのために、フローティング要素の負のマージンと組み合わせて使用することもできますが、ボックスを数ピクセルに移動する必要がある場合に相対的な位置付けがよく使用されます。 top bottom

コントロールにはブロックが含まれています

相対的なポジショニングの片側効果は非常に便利です。相対的なポジショニング要素は「ローカライズ」です。つまり、絶対的なポジショニングの子孫の包含ブロックになります。これにより、ブロックが含まれている場所を制御するための使いやすいツールが提供されます。ボックス自体を移動せずに

から

を設定するだけです。 position CSSの相対的なポジショニングに関するrelative

FAQ

相対的な位置付けとCSSの絶対的な位置決めの違いは何ですか？ CSSでは、要素の位置決め方法のタイプを指定するために

属性が使用されます。 5つの異なる値は、

、

、position、position、static、およびrelativeの5つの異なる値があります。相対的なポジショニングと絶対的なポジショニングは、最も一般的に使用される2つの方法です。 fixed absolute相対的な位置決めとは、その通常の位置に対する要素の位置を指します。これは、sticky、

、

、およびtopプロパティを設定すると、要素が通常の位置から移動することを意味します。ただし、他の要素は、要素によって残されたギャップに合うように調整されません。 right 一方、絶対的な位置決めにより、要素を最も近い位置にある祖先と比較して配置することができます。絶対に配置された要素に位置付けられた祖先がない場合、ドキュメント本体を使用し、ページがスクロールするときに移動します。 bottom

Z-Index属性は相対的なポジショニングでどのように機能しますか？

cssのz-index属性は、重複する要素の垂直スタッキング順序を制御します。したがって、重複する要素の表示順序を制御するために、相対的なポジショニングで使用できます。 z-index属性は、配置された要素にのみ適用されます（position: absolute、position: relative、position: fixed、またはposition: sticky）。

より高い

値の要素は、低いz-index値の要素の前に表示されます。 z-indexが指定されていない場合、要素はHTMLドキュメントに表示される順序で積み重ねられます。 z-index

相対的な位置付けで、値、右、下、左のプロパティとしてパーセンテージ値を使用できますか？

はい、相対的な位置付けで

、top、right、およびbottomプロパティとしてパーセンテージ値を使用できます。パーセンテージ値を使用する場合、ブロックを含む要素のサイズに関連しています。たとえば、leftを設定すると、要素を含むブロックの高さの半分を下に移動します。 top: 50%

相対的な位置付けに1つの方向（上部または左など）のみを指定するとどうなりますか？

相対的な位置付けに対して1つの方向（

またはtopなど）のみを指定する場合、要素は指定された値に従ってその方向から移動します。反対側（leftまたはright）は影響を受けず、要素はその側から移動しません。 bottom

ディスプレイで相対的なポジショニングを使用できますか：flexまたはdisplay：グリッド？

はい、相対的なポジショニングを使用して

またはdisplay: flexを使用できます。 display: grid属性はposition属性から独立しているため、任意のディスプレイタイプを使用して任意のポジショニング方法を使用できます。ただし、これらのプロパティが相互作用する方法により、いくつかの組み合わせが期待される結果が得られない場合があることを忘れないでください。 display

相対的なポジショニングはドキュメントのプロセスにどのように影響しますか？

相対的な位置は、通常のドキュメントストリームから要素を削除しません。代わりに、周囲のレイアウトを変更せずに要素の位置を変更します。これは、要素の空間が通常の位置にあるかのようにレイアウトにとどまることを意味します。

相対的な位置付けで、トップ、右、底部、左のプロパティとしてネガティブ値を使用できますか？

はい、ネガティブ値は、相対的なポジショニングで

、top、right、およびbottomプロパティとして使用できます。負の値は、要素を反対方向に動かします。たとえば、leftを設定すると、要素を20ピクセル上に移動します。 top: -20px

CSSの相対的なポジショニングの目的は何ですか？

他の要素のレイアウトに影響を与えることなく、要素の位置を調整する場合は、CSSの相対的な位置を使用します。また、絶対に配置された子要素のコンテキストを作成したい場合にも便利です。

相対的なポジショニングは、マージン、パディング、境界などの他のCSS特性とどのように相互作用しますか？

margin、padding、borderプロパティは、要素と周囲の空間のサイズに影響します。これらのプロパティは、相対的なポジショニングが通常のプロセスと同じ方法で機能するのと同じように機能します。比較的配置されているtop、right、bottom、およびleftプロパティは、通常の位置から要素を移動しますが、それらはその周囲の要素のサイズまたはスペースには影響しません。