open

CSS La propriété position.

#1 Les valeurs de la propriété position open

La propriété CSS position sert à positionner des éléments HTML. La propriété position peut prendre les valeurs suivantes :

  • static valeur par défaut.
  • relative.
  • absolute.
  • fixed.

#2 Les propriétés de décalage open

Ces propriétés spécifient une valeur de décalage par rapport aux bords d'une boîte de référence. C'est en appliquant des décalages que l'on va positionner une boîte par rapport à sa boîte de référence. On verra quelle est la boîte de référence dans chaque situation.

Decalage CSS top et right
  • top spécifie le décalage par rapport au bord supérieur.
  • bottom spécifie le décalage par rapport au bord inférieur.
  • left spécifie le décalage par rapport au bord gauche.
  • right spécifie le décalage par rapport au bord droit.

Vous choisissez top ou bottom mais pas les deux. Vous choisissez left ou right mais pas les deux.

N'oubliez pas que vous pouvez aussi produire des décalages avec des marges.

#3 Qu'est ce qu'on appelle un élément positionné ? open

Un élément est positionné si la valeur de sa propriété position n'est pas static.

#4 La valeur static open

  1. La valeur static est la valeur par défaut de la propriété position.
  2. Avec cette valeur de la propriété position l'élément est dans le flux. Si besoin voyez ce tutoriel : Qu'est ce que le positionnement dans le flux ?.
  3. Les propriétés de décalage ne sont pas utilisables.
  4. Même si c'est la valeur par défaut, vous pouvez avoir besoin de la valeur static pour ramener dans le flux un élément qui en a été sortie.

Dans l'exemple ci-dessous l'élément div#alterner est positionné à static lorsque la fenêtre est petite et à absolute quand la fenêtre est plus grande.

Tester le code

#5 La valeur relative open

Si la propriété position a la valeur relative alors la boîte est positionnée mais elle reste dans le flux. La boîte de référence pour les décalages est la boîte elle même placée dans le flux sur sa position par défaut. Les décalages n'influencent pas les autres boîtes. L'espace occupé est le même avec ou sans décalages. Par contre il peut y avoir chevauchement de boîtes.

Ci-dessous la propriété position vaut relative. La boîte est positionnée mais elle reste dans le flux. Visuellement il ne se passe rien sauf que maintenant je peux appliquer des décalages par rapport à cette position. Ci-dessous j'ai tracé deux axes :

  1. Un premier axe sur le bord gauche car dans l'étape suivante je vais appliquer un premier décalage par rapport au bord gauche.
  2. Un deuxième axe sur le bord bas car dans l'étape suivante je vais appliquer un deuxième décalage par rapport au bord bas.
  3. Pour éviter le chevauchement de boîte j'ai mis un margin-top de 50px sur le div conteneur pour l'espacer du header.
Boite en position relative sans décalage

Ci-dessous j'applique des décalages :

  1. J'applique un décalage par rapport au bord gauche avec la déclaration left:3rem; ce qui provoque un décalage vers la droite.
  2. J'applique un décalage par rapport au bord bas avec la déclaration bottom:2rem; ce qui provoque un décalage vers le haut.
Boite en position relative avec décalage
Tester le code

#6 La valeur absolute open

Je vous explique ci-dessous le fonctionnement de base dans ses grandes lignes. Ensuite je fais un exemple concret.

  1. Une boîte qui est positionnée en position:absolute; est sortie du flux.
  2. Ça nous donne la possibilité de la superposer à d'autres boîtes. Et c'est là l'intérêt.
  3. Pour la positionner il faudra appliquer des décalages. Ces décalages seront appliqués par rapport à une boîte de référence qui sera soit celle du dernier ancêtre positionné soit celle du body. Donc il vous faudra d'abord "fabriquer" un ancêtre ou en choisir un. Puis il vous faudra le positionner. Si vous ne le faites pas ce sera le body qui jouera ce rôle sans que vous ayez besoin de le demander.

Dans l'exemple suivant je mets en pratique ce que je viens d'expliquer :

  1. Je place une image qui contient une croix dans un conteneur qui est le header. Ca ça se passe au niveau du HTML. Le header est parent de l'image. C'est lui qui va être l'ancêtre que je vais positionner. Remarquez qu'il est parent direct mais ce n'est absolument pas indispensable.
  2. Pour le positionner je place l'élément header en position:relative;. Il reste dans le flux et étant donné qu'il n'y a pas de décalage ça ne change rien pour lui. Ce n'est pas pour lui que je le fais c'est pour l'image qui est dedans. Il devient son ancêtre positionné.
  3. Je place l'élément img en position:absolute;. Son ancêtre positionné étant le header. Pour déplacer img dans header il faut que je demande des décalages par rapport à la boîte de header.
  4. Je demande 10px de décalage par rapport au bord droit de la boîte du header avec la déclaration right: 10px;.
  5. Je demande 5px de décalage par rapport au bord haut de la boîte du header avec la déclaration top: 5px;.
Boite en position absolute
Tester le code

#7 La valeur fixed open

Dans l'exemple ci-dessous je superpose une grande boîte (à droite) placée dans le flux avec une marge gauche et un menu (à gauche) positionné en fixed et placé dans cette marge. La boîte de référence pour les décalages est celle de l'élément body car il n'y a pas de parent positionné. La boîte correspond donc à la fenêtre du navigateur. L'objectif bien sûr est de pouvoir scroller la grande boîte sans que le menu ne bouge. Ce qui est le cas puisqu'il est en quelque sorte "attaché à la fenêtre".

Menu en position fixed

Dans le code ci-dessous la boîte jaune de l'image ci-dessus c'est la section d'id conteneur. Le menu est constitué d'une liste à puces placée dans l'élément nav.

Tester le code