絶対/相対配置を削除せずに、絶対配置された要素を垂直方向にスタックするにはどうすればよいですか?-CSSチュートリアル-php.cn

絶対/相対配置を削除せずに、絶対配置された要素を垂直方向にスタックするにはどうすればよいですか?

Susan Sarandon

リリース： 2024-12-25 07:54:12

オリジナル

614 人が閲覧しました

How to Stack Absolutely Positioned Elements Vertically Without Removing Absolute/Relative Positioning?

配置のジレンマ: 絶対配置による要素の重複

Web デザインでは、絶対配置を使用すると、特定の要素のレイアウトを作成するのに役立ちます。ただし、特に要素を垂直方向に次々と積み重ねようとする場合には、課題が生じる可能性もあります。

次の CSS スニペットを検討してください:

body {
  position: relative;
  min-height: 2em;
  width: 100%;
}

.container {
  position: absolute;
}

.row {
  position: relative;
}

.col1,
.col2 {
  position: absolute;
}

ログイン後にコピー

および対応する HTML:

<body>
  <div class="container">
    <div>

ログイン後にコピー

この設定では、2 つの .row 要素が互いに重なり合うのではなく、垂直方向にスタックされるようにすることが目的です。彼らが現在そうしているように。絶対/相対配置プロパティを削除せずにこれを実現するにはどうすればよいですか?

CSS 配置について

解決策を見つけるには、さまざまな種類の CSS 配置を理解することが重要です。 :

static: 要素は通常、ドキュメントのレイアウト。
相対: 要素は上、右、下、左のオフセットに基づいて移動しますが、ドキュメントフロー内に残ります。
絶対 >: 要素はドキュメントフローから削除され、最も近い 配置された祖先 を基準にして配置されます (要素の配置ではありません)。
修正: 要素はドキュメントフローから削除され、ビューポートを基準にして配置され、ページとともにスクロールします。

問題要素が重なっている

この例では、 .row 要素と .col 要素は絶対的に配置されます。これは、それらが通常の文書フローから取り出され、互いに積み重ねられることを意味します。これを解決するには、特定のレイアウト目的での絶対位置を維持しながら、ドキュメントフロー内にそれらを保持する方法を見つける必要があります。

解決策: 二重ネスト

型破りだが効果的な解決策の 1 つは、行を配置する 2 番目のコンテナ要素を作成することです。絶対に:

<body>
  <div class="container">
    <div class="inner-container">
      <div>

ログイン後にコピー

.container {
  position: relative;
  min-height: 2em;
  width: 100%;
}

.inner-container {
  position: absolute;
}

.row {
  position: relative;
}

.col1,
.col2 {
  position: absolute;
}

ログイン後にコピー

この二重のネストにより、.inner-container は .row の最も近い 位置の祖先 として機能します。 要素。その結果、行は垂直方向にスタックされ、重なり合う問題を解決しながら元のレイアウトを維持します。

注: このソリューションは、目的の垂直方向のスタックを実現しながら、他のレイアウト目的の絶対位置を維持します。要素。ただし、これは一般的な使用には推奨されず、絶対/相対位置を削除できない場合の最後の手段として使用する必要があります。

以上が絶対/相対配置を削除せずに、絶対配置された要素を垂直方向にスタックするにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。