web-dev-qa-db-ja.com

CSSを使用して絶対配置要素をクリアできるか？

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>
htmlcsscss-positionclear
11
Staffan Estberg

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

20
Diodeus - James MacFarlane

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

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

フローティングエレメントの場合、clearfixと呼ばれる特定のクリアリングテクニックを使用することをお勧めします。私はそれを宗教的に使用しています。

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

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

5
Lex Semenenko

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

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

私は this の簡単な解決策を発見しました。考えられるすべての問題を網羅しているわけではありませんが、少なくとも私の問題は解決しました。

HTML：

<p>Content before</p>
<div class="offset-wrapper">
    <div class="regular">
        <img src="https://www.gravatar.com/avatar/bdf0bf75e96fa18e57769865ebeb9a6e?s=48&d=identicon&r=PG" />
    </div>
    <div class="special">
        <img src="https://www.gravatar.com/avatar/bdf0bf75e96fa18e57769865ebeb9a6e?s=48&d=identicon&r=PG" />
    </div>
</div>
<p>Content after</p>

CSS：

.offset-wrapper {
  background: green;
  position: relative;
  width: 100px;
}
.offset-wrapper .regular {
  visibility: hidden;
}
.offset-wrapper .special {
  bottom: -15px;
  left: -15px;
  position: absolute;
}
0
cjohansson