position et de l'une des valeurs suivantes :relative
La position de l'élément est déplacée...- comme l'on pouvait s'y attendre et devant nos yeux ébahis - relativement à sa position normale.
Convient pour déplacer un élément d'une certaine distance spécifiée. Dans certains cas, vous pouvez aussi utiliser les marges de l'élément pour obtenir le même effet [
margin pour les marges externes aux blocs et padding pour les marges internes. (Très utile pour Internet Explorer à la traîne d'ailleurs...)]
fixed
La position de l'élément est fixée. C'est comme ça et pis c'est tout !absolute
La position de l'élément est fixée relativement à un élément parent.
Ceci fonctionne uniquement lorsque l'élément parent est lui-même positionné avec relative, fixed ou absolute.
Vous pouvez rendre n'importe quel élément parent utilisable en lui spécifiant une position: relative; sans par ailleurs lui spécifier aucun déplacement.
static
La valeur par défaut et pourtant que de qualités ce css.... Cette valeur convient pour désactiver explicitement les autres sortes de positionnement.
position (à l'exception de static),
spécifiez une ou plusieurs de ces propriétés : top (haut), right (droite), bottom (bas), left (gauche), width (largeur), height (hauteur) pour identifier où l'élément doit se positionner, et éventuellement sa taille.
Exemple |
|---|
Pour positionner deux éléments l'un au dessus de l'autre, créez un élément parent conteneur avec les deux éléments à l'intérieur de celui-ci :
<DIV id="conteneur"> Dans votre feuille de style, rendez la position de l'élément
#conteneur {
position: relative;
font: bold 200% sans-serif;
}
#front, #back {
position: absolute;
margin:0px;
top: 0px;
left: 0px;
}
#front {
color: green;
}
#back {
color: red;
}
|
Le résultat est une barre oblique inversée par dessus l'autre barre oblique : ♪♬♫ E viva italia...♪♬♫
|
/ \ |