Accueil    CSS    Propriété position
 



style css position  Style CSS position

«  Partie précédente  |  Index  |  Partie suivante  »


La propriété position permet de définir comment l'élément html sera positionné dans la page. Elle sert à déterminer quel sera le référentiel utilisé pour positionner l'élément.

Ce référentiel peut être :
    - la fenêtre du navigateur (position "fixed")
    - le dernier élément parent explicitement positionné (position "absolute")
    - la position théorique de l'élément (position "relative")
    - le dernier élément précédant cet élément (position "static", par défaut)
L'origine du référentiel est toujours le coin superieur gauche.

Une fois la propriété position valorisée, ce sont les propriétés top et left qui sont utilisées pour définir les coordonnées du coin supérieur gauche de l'élément et les propriétés width et height pour initialiser la largeur et la hauteur de l'élément.



Propriétés pour le style position :




Propriété Définition Valeurs CSS
position Détermine le référentiel de positionnement d'un élément absolute
fixed
relative
static
inherit
CSS 1


Exemple d'utilisation du style css position :




Mise en place d'éléments <div> en position absolue :

<div style="position:relative; width:500px; height:300px; border:dotted 1px black;">
   <div style="position:absolute; width:100px; height:100px; top:200px; left:400px;
      background-color:silver; border:solid 1px black;">
      DIV 1
   </div >
   <div style="position:absolute; width:100px; height:100px; top:100px; left:300px;
      background-color:steelblue; border:solid 1px black;">
      DIV 2
   </div >
   <div style="position:absolute; width:50px; height:50px; top:50px; left:250px;
      background-color:lightsteelblue; border:solid 1px black;">
      DIV 3
   </div >
   <div style="position:absolute; width:50px; height:300px; top:0px; left:50px;
      background-color:silver; border:solid 1px black;">
      DIV 4
   </div >
   <div style="position:absolute; width:150px; height:50px; top:250px; left:0px;
      background-color:steelblue; border:solid 1px black;">
      DIV 5
   </div >
</div >

Afficher l'exemple de positionnement fixed.



DIV 1
DIV 2
DIV 3
DIV 4
DIV 5