La propriété "position" en CSS

Liévin hakiza — Thu, 20 Jul 2023 10:26:05 +0000

<!..c'est quoi une position?..>

<!..différentes valeurs de la propriété position en CSS..>

La propriété css "position" définit la manière dont un élément s'affiche sur la page, sa position par rapport à lui-même ou par rapport à d'autres contenus de la page, son emplacement final état définit par les valeurs: top, right, Bottom ou left.

La propriété position peut prendre différentes valeurs dépendamment du choix voulu, comment vous voulez positionnés les éléments sur votre page; ces valeurs peuvent être: Static, Relative, Absolute, Fixed ou Sticky.

1. La position STATIC:
La position avec la valeur Static ou le positionnement statique; c'est le comportement normal(par défaut) d'un élément sur un page, il donc positionné dans le flux normal.
Par contre les propriétés: top, right, bottom, left et Z-index ne fonctionneront pas sur cet élément.

2. La position RELATIVE:
Un élément dont la position calculée est relative; est positionné dans le flux normal de la page(du document), puis décalé des autres éléments par rapport à lui-même selon les valeurs fournies aux propriétés conjointes: top, right, bottom ou left. Cette valeur peut créer un contexte d'empilement c'est-à-dire l'élément peut se superposer au-dessus des autres éléments sur la page si la propriété Z-index ne vaut pas Auto.


/* On sélectionne l'élément auquel on veut appliquer une position
par exemple un titre de premier niveau <h1>titre de niveau 1</h1>*/

h1{
   position: relative;
   top:20;
   right:10;
  }

3. La position ABSOLUTE:

un élément dont la valeur de la propriété position vaut Absolute; est retiré du flux normal de la page et aucun espace ne réservé sur cette dernière et l'élément est ensuite positionné par rapport à son ancêtre le plus proche qui est aussi positionné.

A noter qu'un élément peut prendre la position absolute si et seulement si son ancêtre le plus proche a la position soit relative, absolute, fixe, sticky; sauf la position static.

/* On séléctionne un élément par exemple un <div>something to be positionned</div> ; c'est élément div doit etre placé dans un contenneur parent ayant la position soit relative*/
div{
   postion: absolute;
   bottom: 20;
   left: 10;

4. La position FIXED: Un élément dont la position calculée vaut fixed, ne bouge pas de sa position initiale peut importe la valeur de la proprité overflow; cette position peut créer un contexte d'empilement avec les autres éléments sur la page.


/* On sélectionne l'élément auquel on veut appliquer une position
par exemple un titre de premier niveau <h1>titre de niveau 1</h1>*/

h1{
   position: fixed;
  }

5. La position STICKY:
Un élément dont la position calculée vaut Sticky; est positionné en fonction du flux normal de la page et décalé par rapport à son ancêtre de défilement le plu proche.
A noter que la valeur de positionnement Sticky entrainera toujours un contexte d'empilement quand Overflow vaut Scroll ou auto; la position STicky de l'élément ne fonctionnera pas lorsque valeur de la propriété Overflow vaut hidden.
Si l'élément à positionner est placé dans un conteneur(un ancêtre ou un élément parent), ce conteneur doit avoir été positionné aussi.

<!--- Prenons un exemple en html d'un élément ayant une postion Sticky --->

     <div class="conteneur">
           <div>Valeur à positionner</div>
     </div>

/* code du positionnement en css>*/

div{
   position: relative;
   top:20;
   right:10;
  }

.conteneur{
      position: relative;
      overflow: scroll;

DEV Community: Liévin hakiza

La propriété "position" en CSS