recherche

Maison >interface Web >tutoriel CSS >Analyse des propriétés en cascade CSS : z-index et position

Analyse des propriétés en cascade CSS : z-index et position

王林
王林original
2023-10-20 09:27:331485parcourir

CSS 层叠属性解析：z-index 和 position

Analyse des attributs en cascade CSS : z-index et position

En CSS, z-index et position sont deux attributs en cascade couramment utilisés, qui sont utilisés pour contrôler l'ordre d'empilement et le positionnement des éléments. Cet article analysera ces deux propriétés en détail et fournira des exemples de code pertinents.

1. Attribut z-index

L'attribut z-index est utilisé pour contrôler l'ordre d'empilement des éléments. Il accepte une valeur entière comme paramètre. Plus la valeur est grande, plus l'élément est affiché haut. Par défaut, la valeur z-index d'un élément est 0.

Syntaxe : z-index : valeur numérique ;

Il est à noter que seuls les éléments positionnés (c'est-à-dire les éléments dont la valeur de position est relative, absolue ou fixe) peuvent utiliser l'attribut z-index. L'attribut z-index d'un élément positionné affecte l'ordre d'affichage de ses enfants et des autres éléments parents et frères.

Ce qui suit est un exemple qui démontre l'utilisation de l'attribut z-index : 

<!DOCTYPE html>
<html>
<head>
<style>
#div1 {
  width: 200px;
  height: 200px;
  background-color: red;
  z-index: 1;
}

#div2 {
  width: 200px;
  height: 200px;
  background-color: blue;
  position: relative;
  top: 50px;
  left: 50px;
  z-index: 2;
}
</style>
</head>
<body>

<div id="div1"></div>
<div id="div2"></div>

</body>
</html>

Dans le code ci-dessus, div1 et div2 sont respectivement deux éléments de positionnement. La valeur z-index de div2 est plus grande, donc div2 couvrira div1. montré ci-dessus.

2. Attribut de position

L'attribut position est utilisé pour contrôler le positionnement des éléments. Les valeurs communes sont statiques, relatives, absolues et fixes.

  1. statique : valeur par défaut. Les éléments suivent la disposition normale du flux de documents et ne subissent aucun positionnement particulier.
  2. relatif : positionnement relatif. L'élément est positionné par rapport à sa position normale. La position de l'élément peut être ajustée via les attributs haut, bas, gauche et droite.
  3. absolu : positionnement absolu. Un élément est positionné par rapport à son ancêtre positionné le plus proche, ou à son bloc contenant d'origine s'il n'y a pas d'ancêtre positionné.
  4. fixed : positionnement fixe. Les éléments sont positionnés par rapport à la fenêtre du navigateur et leur position ne change pas même si la page défile.

Voici un exemple qui démontre l'utilisation de l'attribut position : 

<!DOCTYPE html>
<html>
<head>
<style>
#div1 {
  width: 200px;
  height: 200px;
  background-color: red;
  position: relative;
  top: 50px;
  left: 50px;
}

#div2 {
  width: 200px;
  height: 200px;
  background-color: blue;
  position: absolute;
  top: 100px;
  left: 100px;
}
</style>
</head>
<body>

<div id="div1"></div>
<div id="div2"></div>

</body>
</html>

Dans le code ci-dessus, div2 utilise l'attribut position:absolute pour le positionner par rapport à div1. En ajustant les valeurs des attributs haut et gauche, la position de div2 peut être modifiée.

Résumé :

z-index et position sont des propriétés d'empilement couramment utilisées en CSS. Elles peuvent contrôler l'ordre d'empilement et le positionnement des éléments. En utilisant rationnellement ces deux attributs, des effets de mise en page riches et diversifiés peuvent être obtenus.

Ce qui précède est l'analyse des propriétés en cascade CSS z-index et position, ainsi que des exemples de code associés. J'espère que ça aide.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

css Static position
Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：Conseils d'optimisation des propriétés flottantes claires CSS : effacement et débordementArticle suivant：Conseils d'optimisation des propriétés flottantes claires CSS : effacement et débordement

Articles Liés

Voir plus