web-dev-qa-db-fra.com

Effacer les éléments absolument positionnés avec CSS possible?

Est-il possible d'effacer des éléments en position absolue avec CSS? Je crée une page sur laquelle chaque partie du site (élément de section) doit être positionnée de manière absolue, et je souhaite appliquer un pied de page avec un contenu situé sous ces éléments.
J'ai essayé de positionner relativement l'en-tête et le pied de page pour voir si une hauteur totale serait prise en compte, mais que le pied de page reste "piégé" sous les éléments de section. Des idées?

<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
10
Staffan Estberg

Les éléments positionnés de manière absolue ne font plus partie de la présentation - les éléments parents n'ont aucune idée de la taille des éléments enfants placés de manière absolue. Vous devez définir vous-même la hauteur de "contenu" pour vous assurer qu'il ne chevauche pas le pied de page.

18
Diodeus - James MacFarlane

N'utilisez pas d'éléments parfaitement positionnés pour les présentations car ces éléments sont supprimés du flux normal et n'affectent plus les éléments les entourant. Et ils ne sont pas affectés par d'autres éléments. 

Utilisez le positionnement absolu pour déplacer des éléments dans un conteneur lorsque les conditions le permettent.

Pour les éléments flottants, je vous suggère d'utiliser une technique de clearing appelée clearfix. Je l'utilise religieusement. 

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

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

4
Lex Semenenko

Même question, toutes les positions absolues sont positionnées, mais la première est relative, car pour une présentation réactive où la hauteur change, cela aide à garder une trace des modifications de hauteur des éléments. Notez que, dans ce cas, tous les éléments ont la même hauteur:

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

1
o roodie

J'ai découvert une solution facile à ceci , elle ne couvrait peut-être pas tous les problèmes possibles mais au moins, elle résolvait mon problème.

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