親要素に対する CSS 子要素の固定配置ソリューションの詳細な説明

基本概念

絶対配置: 絶対配置に設定された要素ボックスはドキュメント フローから完全に削除され、その包含ブロック (ドキュメント内の別の要素または最初の包含ブロック) を基準に配置されます。通常のドキュメント フローで要素が以前に占めていたスペースは、要素が存在しなかったかのように閉じられます。配置された要素は、通常のフローで生成されるボックスの種類に関係なく、ブロックレベル ボックスを生成します。

https://www.w3school.com.cn/css/css_positioning_absolute.asp

相対配置: 相対配置に設定された要素ボックスは、一定の距離だけオフセットされます。要素は配置されていない形状を保持し、元々占めていたスペースが保持されます。

https://www.w3school.com.cn/css/css_positioning_relative.asp

問題分析

絶対配置された要素は、最も近い配置された祖先を基準として配置されます。要素に配置された祖先がない場合、その要素は最初の包含ブロックを基準として配置されます。

ポジショニングで最も重要なことは、それぞれのポジショニングが何を意味するかを覚えておくことです。それでは、これまで学んだことを復習しましょう。相対配置はドキュメント内の要素の初期位置を基準としますが、絶対配置は最も近い配置された祖先、または配置された祖先がない場合は初期包含ブロックを基準とします。

注: ユーザー エージェントに応じて、初期の包含ブロックはキャンバスまたは HTML 要素になる場合があります。

ヒント: 絶対位置に配置されたボックスはドキュメント フローに依存しないため、ページ上の他の要素と重なる可能性があります。 z-index プロパティを設定することで、これらのボックスの積み重ね順序を制御できます。

解決

<div class="アシスター">
  <div class="parent">
    <div class="child"></div>
    <div class="プレースホルダー"></div>
  </div>
</div>

<スタイル>
.assistor {
  位置: 相対; /*キーポイント*/
  表示: ブロック;
  幅: 500ピクセル;
  高さ: 300px;
  マージン: 100px 自動 0 自動;
  背景色: #ddd;
}
。親 {
  幅: 500ピクセル;
  高さ: 300px;
  背景色: #888;
  overflow: auto; /*キーポイント*/
}
。子供 {
  position: absolute; /*キーポイント*/
  幅: 120ピクセル;
  高さ: 120px;
  マージン: 100px 50px;
  背景色: #333;
}
.プレースホルダー{
  幅: 1000ピクセル;
  高さ: 1000ピクセル;
}
<スタイル>

子は assistantposition: absolute を基準に配置され、親のコンテンツがそれ自体を表示する役割を担います。

アシスタントが親と同じサイズである限り、子要素は親要素に対して固定されているように見えます。

具体的な原則: position: absolute; の要素は、position: relative; の最初の祖先要素を基準に配置され、アシスタントは position: reletive; に設定され、スクロール バーは親にあり、position: fixed; で親のコンテンツのスクロールが実現されます。

参考文献

https://www.cnblogs.com/qqfontofweb/p/7813718.html

これで、親要素に対する子要素の固定配置に関する CSS ソリューションの詳細な説明は終了です。親要素に対する CSS 固定配置に関するより関連性の高いコンテンツについては、123WORDPRESS.COM の以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。