OpenWeb - Positionnement flux et relatif - Exemples

Cette page illustre différents exemples utilisés dans Initiation au Positionnement CSS 1.flux et position relative.

---

Boîtes de type bloc en flux normal

Code HTML :

<p class="rouge">Une boîte rouge</p>
<p class="vert">Une boîte verte</p>

Code CSS :

.rouge {background-color: #ff9999;}
.vert {background-color: #99cc99;}

Résultat :

Une boîte jaune

Une boîte verte

Boîtes de type en-ligne en flux normal

Code HTML :

<p>
<span class="rouge">Une boîte rouge</span>
<span class="vert">Une boîte verte</span>
</p>

code CSS :

p {border: 1px dotted #000000;}
.rouge {background-color: #ff9999;}
.vert {background-color: #99cc99;}

Résultat :

Une boîte jaune Une boîte verte

Boîte en position relative

Code HTML:

<p>Lorem
<span class="jaune">boîte en position relative</span>
 ipsum dolor.</p>

Code CSS:

.jaune {
position: relative;
bottom: 5px;
background-color: #ffff00;
}

Résultat :

Loremboîte en position relative ipsum dolor.

Boîte en position relative avec chevauchement

Code HTML:

<p>Lorem
<span class="jaune">boîte en position relative</span>
 ipsum dolor.</p>

Code CSS:

.jaune {
position: relative;
bottom: 5px;
left: 3em;
background-color: #ffff00;
}

Résultat :

Loremboîte en position relative ipsum dolor.