La position absolue et fixe

Durée 1h

Difficulté ★ ☆ ☆

La position absolue

Elle permet de placer un élément en le sortant du flux, c’est à dire que son emplacement ne tient plus compte des balises qui le précèdent ou le suivent dans le code.

position: absolute;

Abscisse et ordonnée

Comme en mathématiques, la position absolue s’accompagne des propriétés top et left qui sont l’équivalent des coordonnées X et Y.

left: 10px;
top: 200px;

L’axe X pointe vers la droite de l’écran, comme en math. L’axe Y pointe vers le bas de l’écran, à l’inverse des repère cartésiens classiques.

Origine du repère

L’origine du repère est une balise, mais laquelle ?

Par défaut, la balise <body>, donc l’angle en haut à gauche de l’écran
…ou bien le bloc parent positionné le plus proche hiérarchiquement

En CSS, un bloc est considéré comme positionné s’il possède une position relative ou absolue ou fixed.

Un bloc n’est donc pas « positionné » par défaut !

Positionner par rapport à body

Par défaut, une balise positionnée en absolue prend comme référence pour son repère la balise <body>

Cela revient à considérer qu’il s’agit de l’angle supérieur gauche du navigateur

Le HTML

    <p class="text">Un paragraphe positionné en absolu</p>

Le CSS

.text {
        position: absolute;
        top: 70px;
        left: 250px;
        width: 150px;
        height: 150px;
        padding: 10px;
        background-color: orange;
      }

Il ne faut jamais utiliser position: absolute; sans la combiner aux propriétés top et left
(en théorie, c’est pas interdit mais si tu débutes, ne le fais pas. COMPRIS ?!)

Positionner par rapport à un élément

Les balises peuvent se positionner par rapport à un élément de référence qui n’est pas la balise <body>

Déclarer un élément de référence

Pour signifier à une balise que l’origine de son repère est une balise parent différente de BODY, on utilise la commande CSS position: relative;

HTML

<div class="parent">Lorem ipsum dolor sit amet, consectetur adipiscing...
      <p class="text">Un paragraphe
 	positionné en absolu</p>
    </div>

CSS

.parent {
	position: relative;
}

.text {
	position: absolute;
	top: 70px;
	left: 250px;

	width: 150px;
	height: 150px;
	padding: 10px;
	background-color: orange;
}

La position absolue : que retenir ?

La position absolue est un positionnement particulier

Il rend l’élément complètement indépendant du reste de la mise en page
Il permet de placer une balise HTML où l’on veut sur la mise en page sans aucune contrainte de positionnement
Il fonctionne par combinaison de coordonnées verticales et horizontales
Il utilise comme origine de repère :
- Soit la balise BODY
- Soit un élément positionné en relatif

Utilisation courante du posionnement absolu

On l’utilise lorsque l’on est certain que l’élément à positionner n’a aucune influence sur le reste de la mise en page

Origine du repère

On utilise dans quasiment tous les cas un élément positionné en relatif, et presque jamais la balise BODY comme origine.

Le code minimal

Le HTML

  
    <div class="parent">
      <p class="enfant">Un paragraphe...</p>
    </div>

Le CSS

        
      .parent {
        position: relative;
      }
      
      .enfant {
        position: absolute;
        top: 70px;
        left: 250px;
      }

Z-index : gérer la superposition de balises HTML

Lorsque des blocs positionnés en absolu sont amenés à se chevaucher, la propriété z-index permet de spécifier l’ordre de superposition. Bien pratique.

z-index: 10;

HTML

	<div>
		Balise DIV positionnée en relative
		<p class="first_P">.first_P</p>
		<p class="second_P">.second_P</p>
		<p class="third_P">.third_P</p>
	</div>

La valeur du z-index est arbitraire. On peut utiliser 2, 3 ou 4, ou bien 1000, 1500, 2000.

Seule la comparaison entre deux z-index détermine l’ordre de superposition.

Attention : le z-index par défaut d’une balise est 1.
De plus, évite les nombres négatifs ou trop grand tels que 99999.

CSS

p {
        position: absolute;
        width:200px; 
        height: 200px;
      }
      
      .first_P {
        z-index: 3;
        top: 30px; 
        left: 100px;  
        background-color: #bbb023;
      }
      .second_P {
        z-index: 20;
        top: 100px; 
        left: 150px;  
        background-color: orange;
      }
      .third_P {
        z-index: 10;
        top: 145px; 
        left: 50px;  
        background-color: lightblue;
      }