ディビの絶対位置を理解して使用するためのガイド

公開: 2020-01-27

絶対位置プロパティは、Diviの新しい位置オプションで使用できる4つの主要な位置タイプの1つです。このチュートリアルでは、要素にDivi内の絶対位置を与えることの意味と、Diviサイトを設計するときにそれをどのように活用できるかについて説明します。

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

ディビの4種類のポジショニングの概要
絶対位置がDiviの要素をどのように「位置」するか
Diviで絶対位置を使用することの利点と欠点
絶対位置でのロケーションポイントの使用
ユースケースの例：同じ高さの宣伝文句に対して絶対にボタンを配置する

見てみな！

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

絶対位置は、Diviで使用できる4つの位置オプションの1つです。以下に、それぞれの概要を示します。

静的（デフォルト）

ディビ絶対位置

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

相対的

ディビ絶対位置

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

絶対

ディビ絶対位置

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

修理済み

ディビ絶対位置

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

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

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

概要で述べたように、絶対的に配置された要素は、最も近くに配置された親コンテナを基準にして配置されます。配置された親コンテナは、静的以外（つまり、相対、絶対、固定）の位置値が与えられたコンテナです。そのため、ほとんどの場合、要素（モジュールなど）をその親コンテナ（または列）内に絶対的に配置する場合は、子モジュールを絶対的に配置する前に、列に相対位置を指定する必要があります。そうでない場合、絶対配置されたモジュールは、静的以外の位置で最も近い祖先を探すためにドキュメント/ページをさらに検索します。このため、Diviでは、セクションと行の両方にデフォルトで相対位置が設定されているため、要素をそれらの要素内に簡単に配置できます。

ディビ絶対位置

これは、列のDiviのデフォルト位置をオーバーライドして静的に設定した場合に、絶対位置モジュールがどのように機能するかを示しています。列に位置がなくなったため、モジュールは位置（相対）を持つ行に対して相対になることに注意してください。

ディビ絶対位置

Diviで絶対位置を使用することの利点と欠点

絶対位置は、要素を配置するためのさまざまな方法の1つにすぎません。したがって、他の代わりに絶対位置を使用することの利点と欠点のいくつかをカバーすることは有用です。

利点

変換変換やマージンなどの他のポジショニングプロパティよりも絶対位置を使用する利点は次のとおりです。

良いデザインツール

絶対位置通常の流れから外れるため、配置が行われた後、要素の実際のスペースが設計に影響を与えることはありません。これも欠点になる可能性がありますが、レイアウトにスペースを追加するために必要になる可能性のある追加のクリーンなしで、すでに確立されたデザインに要素を追加する場合は常に有益です。つまり、既存の要素を移動せずにページに要素を追加できます。

フロートとマージンの良い代替手段

絶対位置を使用すると、同様の配置を実現するために、フローティング要素に依存したり、マージンを使用したりする必要はありません。 Divi内のネイティブオプションではありませんが、CSSに精通している人は、フロートを使用して要素を右または左に配置できることを知っています。これは少しバグがあり、場合によっては予測できない可能性があります。マージンを使用して要素を配置する場合も同様です。不必要な間隔を残さずに要素を適切に配置するための正確なマージン値を予測することが難しい場合があります。絶対位置を使用することは、フロートとマージンの両方に適した「正確な位置決め」の代替手段になります。

優れたブラウザサポート

絶対位置プロパティは、すべての主要なブラウザーで広くサポートされているため、通常、他のブラウザーで予期せず問題が発生しないことを信頼できます。

欠点

絶対位置を使用するときに考慮すべきいくつかの欠点は次のとおりです。

孤立のリスク

絶対的に配置された要素は通常のドキュメントフローから外れるため、その近くに要素を追加するのは難しい場合があります。それらはページ上の他の要素から分離されます。たとえば、通常Diviでは、テキストモジュールの下にボタンを追加する場合は、モジュールを追加するだけで、テキストモジュールの下に自動的に配置されます。ただし、テキストモジュールが絶対的に配置されている場合は、ボタンモジュールも絶対的に配置してから、top、bottom、left、rightプロパティを使用してボタンをテキストモジュールの下に配置する必要があります。ただし、列（親モジュールコンテナ）を絶対的に配置して、列内のすべてのモジュールが通常のドキュメントフローに従うことができるようにする方が簡単な場合があります（モジュールのグループを1つではなく配置するなど）。

ディビ絶対位置

応答性が低い

また、絶対的に配置された要素はドキュメントフローから外れるため、モバイルデバイスに対して配置を応答性の高いものにすることが難しい場合があります。実際、多くの開発者は、レスポンシブデザインに伴う課題のために、position：absoluteを避けています。したがって、必要に応じて、絶対長の単位（pxなど）ではなく、相対的な長さの単位（vwや％など）を使用することが重要です。

絶対位置でのロケーションポイントの使用

Divi Builderに組み込まれている位置位置オプションを使用すると、位置ポイントをクリックするだけで要素を非常に簡単に配置できます。ロケーションポイントを選択したら、垂直オフセットと水平オフセットを使用して、そのロケーションポイントから追加の位置調整を行うことができます。

デフォルトでは、ロケーションポイントは左上に設定されます。したがって、その場所に垂直オフセットと水平オフセットを追加すると、上と左からの間隔が追加されます。

ディビ絶対位置

右上隅の位置から、垂直オフセットは上からスペースを追加し、水平オフセットは右にスペースを追加します。

ディビ絶対位置

右下隅の位置から、垂直オフセットは下からスペースを追加し、水平オフセットは右にスペースを追加します。

ディビ絶対位置

左下隅の位置から、垂直オフセットは下からスペースを追加し、水平オフセットは左からスペースを追加します。

ディビ絶対位置

中心の絶対要素を調整する

中央に配置された位置オプションを選択すると、DiviはCSSプロパティの組み合わせを使用して、サイズに関係なく要素が完全に中央に配置されるようにします。たとえば、y0uが左中央に配置された位置を選択した場合、Diviは要素を次のように配置します。

ディビ絶対位置

これがバックエンドでのCSSの外観です。

position: absolute!important;
top: 50%;
bottom: auto;
left: 0px;
right: auto;
transform: translateY(-50%);

top：50％は、要素の上部をコンテナの上部から正確に50％の位置に配置するためにあります。 transform：translateY（-50％）は、要素をそれ自体の高さのちょうど半分上に上げるためにあります。これにより、高さに関係なく、完全に配置された要素が得られます。

これは、中央の位置にある要素に追加の調整（またはオフセット）を行う場合に知っておくことが重要です。すでに使用されている値を知らずに、変換変換オプションを使用するという間違いを犯したくありません。このため、何をしているのかを理解していない限り、変換変換の代わりにDiviのmarginプロパティを使用して小さな調整を行うのが最善です。

変換変換オプションを使用して、中央の位置に複数の絶対要素を配置します

transform：translateがどのように使用されているかを理解している場合は、要素の幅を知らなくても、中央に配置された要素をオフセットするのに実際に非常に役立ちます。

たとえば、Diviの列を使用して、モジュールを垂直方向と水平方向の両方の中央に配置するとします。このようになります。

ディビ絶対位置

要素に次のように変換変換を与えた場合、何も変更されません。

変換変換（Y）：-50％
変換変換（X）：-50％

ディビ絶対位置

これは、Diviがすでにバックエンドでこれを自動的に行っているためです。これを知っていると、変換変換オプションを使用して、中心点の位置から調整を行うことができます。また、長さのパーセント単位を使用する場合、100％はモジュールの幅または高さに等しいため、調整を行うためにモジュールの幅または高さを知る必要はありません。したがって、列の中央に4つのモジュールを追加する場合は、変換オプションを使用して、絶対位置にある各モジュールをオフセットできます。

これを行うには、4つのモジュールを作成し、それらすべてに、垂直方向と水平方向の中央に配置された絶対位置を指定します。

ディビ絶対位置

次に、変換変換オプションを使用して、モジュールの幅と高さのパーセンテージに応じてモジュールの位置を調整します。たとえば、モジュールに-100％の変換変換Y軸値を与えると、モジュールはモジュールの正確な高さまで上昇します。モジュールに-100％のX軸値を指定すると、モジュールはモジュールの正確な幅の左側に移動します。これは、絶対的に中央に配置されている要素を組み合わせるのに最適です。

ディビ絶対位置