14

CSSで絶対配置要素をクリアする方法はありますか? サイトの各部分 (セクション要素) を絶対的に配置する必要があるページを作成しており、それらの要素の下にコンテンツを含むフッターを適用したいと考えています。
ヘッダーとフッターを相対的に配置して、合計の高さが考慮されるかどうかを確認しようとしましたが、フッターはセクション要素の下に「閉じ込められ」ます。何か案は？

<header style="position: relative;"></header>

<div id="content" style="position: relative;">

    <section id="a" style="position: absolute;"></section>

    <section id="b" style="position: absolute;"></section>

    <section id="c" style="position: absolute;"></section>

    <section id="d" style="position: absolute;"></section>

    <section id="e" style="position: absolute;"></section>

</div>

<footer style="position: relative;"></footer>
4

4 に答える 4

22

絶対配置された要素はレイアウトの一部ではなくなりました - 親アイテムは、絶対配置された子要素がどれほど大きいかわかりません。フッターと重ならないように、「コンテンツ」の高さを自分で設定する必要があります。

于 2012-10-10T14:15:49.453 に答える
6

絶対位置の要素をレイアウトに使用しないでください。その要素は通常のフローから削除され、周囲の要素に影響を与えなくなります。そして、それらは他の要素の影響を受けません。

条件が許せば、絶対位置を使用してコンテナ内の要素を移動します。

フロート要素の場合、clearfixと呼ばれる特定のクリア手法を使用することをお勧めします。私はそれを宗教的に使用します。

http://nicolasgallagher.com/micro-clearfix-hack/

http://jsfiddle.net/necolas/K538S/

于 2012-10-10T15:08:17.590 に答える
2

同じ質問があり、すべて絶対配置にしましたが、高さが変化するレスポンシブ レイアウトに関しては、最初のものを相対にします。要素の高さの変化を追跡するのに役立ちました。この場合、すべての要素の高さが同じであることに注意してください。

.gallery3D-item {
    position: absolute;
    top: 0;
    left: 0;
}
.gallery3D-item:first-of-type {
    position: relative;
    display: inline-block;
}

于 2016-11-30T09:16:04.993 に答える