La propriété CSS z-index

Comment travailler avec lez-indexpropriété en CSS

Dans leposte de positionnementJ'ai mentionné que vous pouvez utiliser lez-indexpour contrôler le positionnement des éléments sur l'axe Z.

C'est très utile lorsque vous avez plusieurs éléments qui se chevauchent et que vous devez décider lequel est visible, le plus proche de l'utilisateur et lequel (s) doit être caché derrière lui.

Cette propriété prend un nombre (sans décimales) et utilise ce nombre pour calculer quels éléments apparaissent plus près de l'utilisateur, dans l'axe Z.

Plus la valeur de l'indice z est élevée, plus un élément est positionné plus près de l'utilisateur.

Lorsqu'il décide quel élément doit être visible et lequel doit être positionné derrière, le navigateur effectue un calcul sur la valeur de l'indice z.

La valeur par défaut estauto, un mot-clé spécial. Utilisantauto, l'ordre de l'axe Z est déterminé par la position de l'élément HTML dans la page - le dernier frère apparaît en premier, tel qu'il est défini en dernier.

Par défaut, les éléments ont lestaticvaleur pour lepositionbiens. Dans ce cas, lez-indexpropriété ne fait aucune différence - elle doit être définie surabsolute,relativeoufixedtravailler.

Exemple:

.my-first-div {
	position: absolute;
	top: 0;
	left: 0;
	width: 600px;
	height: 600px;
	z-index: 10;
}

.my-second-div {
position: absolute;
top: 0;
left: 0;
width: 500px;
height: 500px;
z-index: 20;
}

L'élément avec classe.my-second-divsera affiché, et derrière.my-first-div.

Ici, nous avons utilisé 10 et 20, mais vous pouvez utiliser n'importe quel nombre. Les nombres négatifs aussi. Il est courant de choisir des nombres non consécutifs, vous pouvez donc positionner des éléments au milieu. Si vous utilisez plutôt des nombres consécutifs, vous devrez recalculer l'indice z de chaque élément impliqué dans le positionnement.

Téléchargez mon gratuitManuel CSS


Plus de didacticiels CSS:


Tech Wiki en ligne!