ホームページ > ウェブフロントエンド > CSSチュートリアル > CSSで要素が親要素を超えるようにする方法

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

藏色散人
リリース: 2023-01-05 16:07:56
オリジナル
6287 人が閲覧しました

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

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

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

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

はじめに

以下に示すようなサスペンション効果が必要な場合があります。
CSSで要素が親要素を超えるようにする方法
CSSで要素が親要素を超えるようにする方法

標準的な通常の状況で

を達成するこれは、絶対位置決めを使用する場合のみ実行できます。
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で要素が親要素を超えるようにする方法

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

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

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

関連ラベル:
css
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート