OpenWeb - Positionnement absolu et relatif - Exemples

Cette page illustre différents exemples utilisés dans Initiation au Positionnement CSS : 3.position absolue et fixe.

Position absolue et chevauchement

Code HTML:

<div class="verte">
<p>
...
</p>
<p class="jaune">Boîte en position absolue</p>
</div>

Code CSS:

.verte {
position: relative;
background-color: #00ff00;
width: 15em;
}
.jaune {
position: absolute;
top: 1em;
right: 1em;
background-color: #ffff00;
}

Résultat :

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem.

Boîte en position absolue

Position absolue dans un espace réservé en haut

Code HTML:

<div class="verte">
<p>
...
</p>
<p class="jaune">Boîte en position absolue</p>
</div>

Code CSS:

.verte {
position: relative;
background-color: #00ff00;
width: 15em;
padding-top: 5em;
}
.jaune {
position: absolute;
top: 1em;
right: 1em;
background-color: #ffff00;
}

Résultat :

Boîte en position absolue

Position absolue dans un espace réservé à droite

Code HTML:

<div class="verte">
<p>
...
</p>
<p class="jaune">Boîte en position absolue</p>
</div>

Code CSS:

.verte {
position: relative;
background-color: #00ff00;
width: 15em;
padding-right: 7em;
}
.jaune {
position: absolute;
top: 1em;
right: 1em;
background-color: #ffff00;
width: 4em;
}

Résultat :

Boîte en position absolue