Les positions et la propriété z-index en CSS sont utilisées pour contrôler la façon dont les éléments HTML sont positionnés sur la page web.

div {
	position:static;
	position:relative;
	position:absolute;
	position:fixed;
	z-index:1;
}

Static

static : C'est la position par défaut de tous les éléments HTML. Un élément positionné en static est simplement placé sur la page selon l'ordre dans lequel il apparaît dans le code HTML.

Relative

relative : Avec cette position, l'élément est déplacé par rapport à sa position initiale en utilisant les propriétés top, right, bottom et left. L'élément conserve sa position d'origine et l'espace qu'il occupait avant son déplacement.

Absolute

absolute : Avec cette position, l'élément est positionné par rapport à son ancêtre positionné le plus proche (autrement dit, un élément qui a une position relative, absolute ou fixed), ou à l'élément body si aucun ancêtre positionné n'existe. L'élément est retiré du flux de la page et ne prend plus de place sur la page, ce qui peut avoir des conséquences sur la mise en page des autres éléments.

Fixed

fixed : Avec cette position, l'élément est positionné par rapport à la fenêtre du navigateur. L'élément reste toujours visible, même si l'utilisateur fait défiler la page.

Left, Top, Right, Bottom

left, top, right, bottom : associé à une valeur en px, em, rem, % ou autre positionnera l’élément par rapport à la gauche, le haut, la droite, ou le bas.

Notez deux choses :

• Le placement se fera via un “bord” ou un “coin”. Donc, si vous utilisez par exemple left:50%, le bord gauche de votre élément sera décalé de 50%, et non pas son centre.
• Le placement se fera par rapport au navigateur en cas de position:fixed, mais par rapport au plus proche élément en position:relative; si vous utilisez position:absolute;

z-index

En ce qui concerne la propriété z-index, elle est utilisée pour contrôler la superposition des éléments HTML en fonction de leur position sur l'axe z (la profondeur). Plus la valeur de z-index est élevée, plus l'élément sera en avant-plan et couvrira les éléments avec des valeurs de z-index inférieures. Cela peut être utile pour contrôler la disposition des éléments sur la page et créer des effets de superposition. Cependant, il est important de noter que z-index n'affecte pas les éléments qui sont positionnés en static.

Voici un exemple de code qui utilise un mélange de ces positions et z-index