CSS により、子コンテナが親要素を超えます (子コンテナは親コンテナ内で浮動します)

序文

場合によっては、次の図のような浮動効果の要件が必要になります。

成し遂げる

標準的な通常の状況では、これは絕對定位を使用することでのみ実現できます。

ステップ 1: 親コンテナの配置を相対的に設定します。

ステップ 2: サブコンテナの配置を絶対に設定します。

<div id="a">
   <div id="b">浮かび上がりたい！ </div>
</div>

#a{
  幅:400ピクセル;
  高さ:100px;
  背景:rgb(0, 0, 0);
  position:relative;/*親要素>相対配置*/
}

#b{
  幅: 150ピクセル;
  高さ:50px;
  背景:rgb(185, 155, 255);
  position:absolute;/*サブ要素>絶対位置指定*/
  top:-30px;/*コントロールフローティング*/
  /* 左:XX; */
}

効果画像:

親要素は絕對定位に設定され、子要素は相對定位に設定されます。つまり、子要素は親要素に従って配置されます。

注意: 子要素のみがドキュメント フローの外側に配置されます。親要素は相対的に配置されており、ドキュメント フローの外側には配置されないため、ページのずれは発生しません。

これで、CSS を使用して子コンテナーを親要素を超えて拡張する方法 (親コンテナー内で子コンテナーがフローティングする効果) に関するこの記事は終了です。CSS を使用して子コンテナーを親要素を超えて拡張する方法の詳細については、123WORDPRESS.COM の以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。