Diviでの相対位置の理解と使用

相対位置プロパティは、おそらく最も神秘的な位置タイプです。 ただし、それがどのように機能するかを理解すれば、Diviでサイトを設計するときにそれを有利に使用できます。 私たちが発見したことはあなたを驚かせるかもしれません。

この投稿では、以下について説明します。

• ディビの4種類のポジショニングの概要
• 相対位置がDiviの要素をどのように「位置」するか
• Diviで相対位置を使用する5つの理由
• 相対位置とマージン
• 相対位置と変換変換

見てみな！

ディビの4種類のポジショニングの概要

相対位置は、Diviで使用可能な4つの位置タイプの1つです。 以下に、それぞれの概要を示します。

静的（デフォルト）

静的要素は、ページ上の要素の通常のフローまたは順序のままであり、他の配置された要素のように上、右、下、および左のプロパティに応答しないため、技術的には「配置」されません（これが理由ではありません）静的/デフォルト位置の要素のオフセットはDiviで使用できます）。 Diviでは、モジュールのデフォルトの位置を選択するとき、静的な位置を選択しています。 Diviの一部の要素（行やセクションなど）には、デフォルトで相対位置（静的位置ではない）があることにも言及する価値があります。

相対的

相対的に配置された要素は、ページの通常の流れに従うという点で静的要素のようなものです。 主な違いは、比較的配置された要素は、top、bottom、left、およびrightプロパティを使用して配置できることです。 また、静的要素とは異なり、ZIndexプロパティを使用して配置することもできます。

絶対

絶対配置された要素は通常のドキュメントフローから外れるため、要素のページに実際のスペースは作成されません。 これは、実際のスペースを占めるページ上の他の要素の上に浮かんでいる要素と考えることができます。 最も近い位置にある親コンテナを基準にして配置されます。

修理済み

絶対位置と同様に、固定位置の要素はページの通常のフローから外れ、ページ内に実際のスペースは作成されません。 絶対位置と固定位置の主な違いは、固定位置がブラウザウィンドウまたはビューポートを基準にしていることです。 つまり、要素がページの通常のフロー内のどこにあるかに関係なく、固定位置が指定されると、その位置はブラウザウィンドウに直接関連するようになります。 top、bottom、left、およびrightプロパティを使用して、ビューポート内に要素を配置できます。 固定要素はページ上の他の要素の後ろまたは前に浮かぶことが多いため、Zインデックスは固定要素を他の要素の上に並べるのに役立ちます。

注：CSSには、スティッキーと呼ばれる別のタイプのポジショニングがあります。 スティッキーに配置された要素は、コンテナまでスクロールするまで（ある時点で一番上の値によって決定される）、比較的配置された要素のように動作します。 次に、ユーザーがコンテナーの最後までスクロールするまで、要素は固定（またはスタック）になります。 ただし、他の要因によって機能が阻害される可能性があるため、スティッキーの位置は少し予測できない場合があります。 Diviでは、この理由により、組み込みオプション内でスティッキーオプションを使用できません。 ただし、Diviで「position：sticky」を使用する方法はいくつかあります。

相対位置がDiviで要素を「配置」する方法

概要で説明したように、相対位置タイプは静的な「位置」に似ています。これは、要素がドキュメントの通常のフロー（ページ上のHTML）に残っているためです。 本当の違いは、要素に相対位置を割り当てると、要素を配置するための新しいオプションが利用できるようになることです。 これらのオプションには、top、bottom、left、rightプロパティ、およびZIndexプロパティが含まれます。

Diviでは、相対位置が選択されると、これらの追加の位置オプションは位置オプショングループの下にあります。

相対位置でのオフセットの使用

オフセット原点とオフセット値は連携して、親コンテナ内の任意の場所に要素を配置します。 この例では、相対位置、左上のオフセット、25pxの垂直オフセット、および25pxの水平オフセットを持つモジュールがあります。 オフセット値が要素をオフセット原点から水平方向および/または垂直方向に移動する方法に注意してください。

これは、同じオフセットを持ち、右上のオフセット原点を持つ同じモジュールです。

これは、同じオフセットと右下のオフセット原点を持つ同じモジュールです。

そして、これは同じオフセットと左下のオフセット原点を持つ同じモジュールです。

スペーシングサプライズなし

相対配置では、オフセット（上、下、左、右）を使用して要素を移動した後、要素の実際のスペースは元の場所に残ります。 要素の新しい位置は、ページ上の残りの要素の間隔を移動したり、影響を与えたりすることはありません。 それは基本的に、体を離れた精神のような他の要素の上に浮かんでいます。

相対位置を使用する理由

＃1絶対位置の要素の親コンテナをレンダリングするには

これはおそらく、相対位置タイプの最も一般的なアプリケーションです。 絶対的に配置された要素は最も近い位置にある祖先を基準にしているため、相対位置を指定するだけで、その祖先の1つを配置要素にすることができます（デフォルトの静的位置は技術的に「配置」されていません）。 これにより、ドキュメントフローが（静的なように）所定の位置に維持され、絶対要素のコンテナを選択できるようになります。

＃2ページ上の他の要素に影響を与えずに要素を移動するには。

相対位置を使用すると、オフセットを使用して、他の要素に影響を与えることなくアイテムを整列させることができます。 また、Diviを使用すると、ドラッグ可能なUIを利用して、要素をリアルタイムで視覚的に配置できます。

＃3他の要素をオーバーラップさせるためにZインデックスを使用するには

デフォルトでは、静的要素は、相対位置が指定されていない限り、z軸で並べ替えることはできません。 相対位置に配置されると、要素はドキュメントの通常のフローに配置されたままになります。 今だけ、Zインデックスを利用して、要素を互いにオーバーラップするときに特定の順序で配置することができます。

＃4ポジションの目的で負のマージンを使用しないようにする

相対的な配置では、元の位置のスペースが残ります。 ただし、マージンが負の場合、コンテンツと元のスペースの両方が再配置されます。 たとえば、Diviの行に負の上部マージンを追加して、その行がその上の行と重なるようにすると、すべての行/コンテンツが一緒に上に移動します。 これにより、クリーンアップに少し混乱が残りますが、代わりに相対位置オフセットを使用することで回避できます。

これは、負の上部マージンを使用してモジュールを上に移動したときに何が起こるかを示しています。 以下の残りの要素がどのように作成されているかに注目してください。

同じモジュールに相対位置を指定すると、垂直オフセットを使用して、ページ上の残りの間隔に影響を与えることなく、モジュールを上に移動できます。

Diviで要素を配置するために負のマージンを使用することがよくありますが、代わりに相対配置を使用できるかどうかはおそらく良い考えではありません。 マージンは要素のボックスモジュールに関連しているため、相対的な配置のように親コンテナからオフセットされた要素を配置するためではなく、要素自体の内部および周囲に間隔を追加することを目的としています。

相対位置と変換変換

相対位置は、ページ上の位置要素に変換変換を使用するのと実際に似ています。 どちらも、実際のスペースを元の場所に残し、ページ上の他の要素に影響を与えずに要素を移動します。

翻訳はアニメーションとトランジション（ホバー効果など）に適しています

ただし、変換はアニメーションとトランジション（ホバー効果など）に最適であるように見えます。これは、トランジションがより速くスムーズになるためです。 上、下、左、右のオフセットを使用して相対要素をアニメーション化または遷移すると、途切れがちになり、ブラウザが必要以上に動作しなくなる可能性があります。

相対的な長さの単位は異なる応答をします

レスポンシブデザインに相対的な長さの単位（％やvwなど）を使用している場合、これらは相対的な位置と変換変換で異なる動作をします。

相対位置と水平オフセットが50％のDiviモジュールは、親コンテナ（または列）の幅の50％に等しい量だけモジュールを水平方向に移動します。

変換変換（X軸）が50％のDiviモジュールは、モジュール自体の幅の50％に等しい量だけモジュールを水平方向に移動します。

相対位置と変換変換を組み合わせて中心要素に変換

先ほど説明したように、相対位置は親を基準にしており、変換変換プロパティは要素自体を基準にしています。 このため、要素を希望どおりに配置するために、両方を組み合わせて使用​​できます。 この手法を使用して、要素をコンテナの中央に配置することもできます。

たとえば、相対位置の水平オフセットを使用して、モジュールを列幅のちょうど50％右に配置できます。

次に、translateプロパティを使用して、モジュールを（モジュール幅の）50％左に移動します。 これにより、モジュールの幅に関係なく、モジュールが列の中央に留まるようになります。

最終的な考え

この記事を書く前の私と同じように、相対位置タイプをよく理解していないか、使用していない可能性があります。 おそらく、この相対的な位置の最も驚くべき側面は、ページ上の残りのデザインにどのように影響するか（または影響しないか）です。 絶対要素と連携して機能するだけでなく、要素を完璧な場所に配置するための変換変換でもうまく機能します。

相対位置タイプについてどのような経験がありますか？

コメントでお返事をお待ちしております。

乾杯！