CSSで要素が親要素を超えるようにする方法

要素が親要素を超えるように CSS を実装する方法: 1. 親コンテナの位置を「相対」 (相対的な位置を意味します) に設定します; 2. 子コンテナの位置を「絶対」に設定します、これは絶対的な位置を意味します。

この記事の動作環境: Windows7 システム、HTML5&&CSS3 バージョン、Dell G3 コンピューター。

CSS は、子コンテナが親要素を超えます (子コンテナは親コンテナ内で一時停止されます)

はじめに

以下に示すようなサスペンション効果が必要な場合があります。

標準的な通常の状況で

を達成するこれは、絶対位置決めを使用する場合のみ実行できます。

ステップ 1: 親コンテナの位置を relative (相対位置) に設定します。
ステップ 2: サブコンテナの位置を absolute (絶対位置) に設定します。

<p id="a">
   <p id="b">我要浮出去！</p></p>

#a{
  width:400px;
  height:100px;
  background:rgb(0, 0, 0);
  position:relative;/*父元素>相对定位*/}#b{
  width: 150px;
  height:50px;
  background:rgb(185, 155, 255);
  position:absolute;/*子元素>绝对定位*/
  top:-30px;/*控制浮出*/
  /* left:XX; */}

レンダリング:

[推奨学習: css ビデオ チュートリアル]
親要素の設定絶対配置 の場合、子要素は relativepositioning に設定されます。つまり、子要素は親要素に従って配置されます。

注: ドキュメント フローから切り離されるのは子要素のみです。親要素は相対的に配置され、ドキュメント フローから切り離されないため、ページのずれは発生しません。

以上がCSSで要素が親要素を超えるようにする方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。