La propriété position spécifie le type de méthode de positionnement utilisé pour un élément (statique, relative, fixe ou absolue).
Il y a quatre valeurs de position différentes:
Les éléments HTML sont positionnés statique par défaut. Ils ne sont pas affectés par les propriétes haut, bas, gauche, et droite.
Un élément avec le style position:static; n'est pas positionné d'une manière particulière; il est toujours positionné dans le flux courant de la page : les éléments de type bloc se suivent les uns en dessous des autres naturellement.
<!DOCTYPE html>
<html>
<head>
<style>
div.maclasse {
position: static;
border: 3px solid #cccccc;
}
</style>
</head>
<body>
<h2>La propriété : "position: static;"</h2>
<p>Un élément avec le style "position: static;"
n'est pas positionné d'une manière particulière;
il est toujours positionné dans le flux courant de la page :
les élements de type bloc
se suivent les uns en dessous des autres naturellement.</p>
<div class="maclasse">
cet élément a la position static;
</div>
<p class="maclasse">Un élément avec le style "position: static;"
n'est pas positionné d'une manière particulière;
il est toujours positionné dans le flux courant de la page :
les élements de type bloc
se suivent les uns en dessous des autres naturellement.</p>
</body>
</html>
Voir
La propriété position:relative; permet de décaler un élément de sa position normale en réglant les propriétés haut, bas, gauche et droite.
L'élément sera alors positionné hors de sa position normale avec les décalages des valeurs.
Les autres contenus ne seront pas ajustés pour tenir dans l'espace vide laissé par l'élément en position relative.
<!DOCTYPE html>
<html>
<head>
<style>
b {
position:relative ;
left: 30px;
top:10px;
color:#900;
background-color:#FFC;
}
</style>
</head>
<body>
<h2>La propriété : "position: relative;"</h2>
<p>La propriété <b>"position: relative;"</b> permet de décaler
un élément de sa position normale en réglant les propriétés
haut, bas, gauche et droite.
L'élément sera alors <b>positionné hors de sa position normale</b>
avec les décalages des valeurs.
Les autres contenus ne seront pas ajustés
pour tenir dans <b>l'espace vide</b> laissé
par l'élement en position relative.</p>
</body>
</html>
Voir
Le positionnement position:absolute; permet de placer un élément n'importe où sur la page.
Il faut également compléter pour le positionnement absolu les 4 propriétés CSS suivante:
left : position par rapport à la gauche de la page ;
right : position par rapport à la droite de la page ;
top : position par rapport au haut de la page ;
bottom : position par rapport au bas de la page.
Il est possible de donner une valeur en pixels ou une valeur en pourcentage.
Exemple :
<!DOCTYPE html>
<html>
<head>
<style>
div.monElementAbsolu {
position: absolute ;
top: 20px;
left : 10 px;
color:#900;
background-color:#FFC;
}
</style>
</head>
<body>
<h2>La propriété : "position: absolute;"</h2>
<div class="monElementAbsolu">
Je suis du texte en absolu
</div>
<p>blablabla...blablabla...blablabla...blablabla...blablabla...
blablabla...blablabla...blablabla...blablabla...blablabla...
blablabla...blablabla...blablabla...blablabla...blablabla...
blablabla...blablabla...blablabla...blablabla...blablabla...
blablabla...blablabla...blablabla...blablabla...blablabla...
blablabla...blablabla...blablabla...blablabla...blablabla...
blablabla...blablabla...blablabla...blablabla...blablabla... </p>
</body>
</html>
Voir
Le principe est exactement le même que pour le positionnement absolu sauf que, cette fois, le bloc reste fixe à sa position, même si on descend plus bas dans la page (scroll)
Exemple :
<!DOCTYPE html>
<html>
<head>
<style>
div.monElementFixe {
position: fixed ;
right: 0px;
bottom : 0 px;
color:#900;
background-color:#FFC;
width:200px;
height:100px;
}
</style>
</head>
<body>
<h2>La propriété : "position: fixed;"</h2>
<div class="monElementFixe">
Je suis du texte en fixe
</div>
<p>blablabla...blablabla...blablabla...blablabla...blablabla...
blablabla...blablabla...blablabla...blablabla...blablabla...
blablabla...blablabla...blablabla...blablabla...blablabla...
blablabla...blablabla...blablabla...blablabla...blablabla...
blablabla...blablabla...blablabla...blablabla...blablabla...
blablabla...blablabla...blablabla...blablabla...blablabla...
blablabla...blablabla...blablabla...blablabla...blablabla... </p>
</body>
</html>
Voir