絶対測位を使用するにはどのような条件を満たす必要がありますか?

絶対位置決めを使用するための条件は何ですか?特定のコード例が必要です。

絶対配置は一般的に使用される CSS 配置方法であり、最も近い非静的 (つまり、position 属性値が静的以外の要素) に配置された親を基準にして要素を配置できます。要素 (body を含む) ) を配置します。絶対位置決めを使用する前に、いくつかの使用条件と注意事項を理解する必要があります。

1. 親要素の位置属性の設定
   絶対位置を使用する前に、親要素の位置属性値がデフォルトの静的値ではなく、相対、絶対、または固定であることを確認する必要があります。 。これは、絶対配置が静的に配置されていない最も近い親要素を基準にして配置されるためです。修飾された親要素がない場合、絶対配置はドキュメント全体を基準にして配置されるため、通常は望ましい結果が得られません。

サンプル コード:
HTML:

<div class="parent">
  <div class="child">Hello World</div>
</div>

CSS:

.parent {
  position: relative;
}

.child {
  position: absolute;
  top: 50px;
  left: 50px;
}

2. 位置決めプロパティの明示的な設定
   親要素の要求に加えて位置属性を設定するには、位置を設定する子要素の位置属性を明示的に設定し、それを絶対または固定に設定する必要もあります。絶対位置指定を使用できるのは、位置指定属性が設定されている要素のみです。

サンプルコード:
HTML:

<div class="parent">
  <div class="child">Hello World</div>
</div>

CSS:

.parent {
  position: relative;
}

.child {
  position: absolute;
  top: 50px;
  left: 50px;
}

3. 配置方法を指定
   上から絶対配置が可能です。一番下、left プロパティと right プロパティは、親要素の端からの距離を指定します。これらのプロパティを使用して要素の位置を微調整できます。位置決め属性の値は、特定のピクセル値またはパーセンテージ値であることに注意してください。

サンプル コード:
HTML:

<div class="parent">
  <div class="child">Hello World</div>
</div>

CSS:

.parent {
  position: relative;
}

.child {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

4. z-index 属性を使用してカスケード関係を制御する
   絶対配置 要素には重複するカスケード関係がある場合があります。この場合、z-index 属性を使用して要素の表示順序を制御できます。より大きな z-index 値を持つ要素は、より小さな z-index 値を持つ要素を上書きします。相対、絶対、または固定の位置属性値を持つ要素のみが z-index 属性を設定できることに注意してください。

サンプルコード:
HTML:

<div class="parent">
  <div class="child" style="z-index: 1;">Hello World</div>
  <div class="child" style="z-index: 2;">I am on top</div>
</div>

CSS:

.parent {
  position: relative;
}

.child {
  position: absolute;
  top: 50px;
  left: 50px;
}

概要:
絶対配置を使用するには、親が要素にPositioning属性が設定されている場合、子要素は明示的にposition属性を設定し、上、下、左、右などの配置方法を指定します。 z-index 属性を使用すると、要素が期待どおりの順序で表示されるようにカスケード関係を制御できます。

以上、絶対位置決めを利用する場合の条件とサンプルコードを記載しましたので、ご参考になれば幸いです。

以上が絶対測位を使用するにはどのような条件を満たす必要がありますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。