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.
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!