ホームページ >ウェブフロントエンド >CSSチュートリアル >絶対/相対配置を削除せずに、絶対配置された要素を垂直方向にスタックするにはどうすればよいですか?
絶対/相対配置を削除せずに、絶対配置された要素を垂直方向にスタックするにはどうすればよいですか?
- Susan Sarandonオリジナル
- 2024-12-25 07:54:12617ブラウズ
配置のジレンマ: 絶対配置による要素の重複
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 サイトの他の関連記事を参照してください。