Cette page illustre différents exemples utilisés dans Initiation au Positionnement CSS : 3.position absolue et fixe.
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
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 :
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
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 :
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
Accueil OpenWeb | Plan du site | Conditions de réutilisation
Cette page est valide Xhtml et Css
Ce site s'affiche mieux dans un navigateur conforme aux standards, voici pourquoi