Maison > Article > interface Web > Comment configurer une relation hiérarchique CSS
En CSS, vous pouvez utiliser l'attribut z-index pour définir la hiérarchie. Cet attribut peut définir l'ordre d'empilement des éléments. Les éléments avec un ordre d'empilement supérieur seront toujours devant les éléments avec un ordre d'empilement inférieur ; est "z-index:numeric;", les valeurs négatives sont autorisées.
L'environnement d'exploitation de ce tutoriel : système Windows7, version CSS3&&HTML5, ordinateur Dell G3.
En CSS, vous pouvez utiliser l'attribut z-index pour définir le niveau. L'attribut
z-index définit l'ordre d'empilement des éléments. Les éléments avec un ordre d'empilement supérieur apparaîtront toujours devant les éléments avec un ordre d'empilement inférieur. (Z-index ne fonctionne que sur les éléments positionnés).
Les étudiants qui ont réalisé la mise en page doivent être très familiers avec l'attribut z-index. Le Z-index est un attribut spécial pour l'affichage des pages Web. Étant donné que le motif affiché par le moniteur est un plan bidimensionnel, il comporte un axe x et un axe y pour représenter l'attribut de position. Afin de représenter le concept tridimensionnel tel que l'ordre de superposition des couches supérieure et inférieure des éléments d'affichage, l'attribut z-index est introduit pour représenter la différence entre l'axe z. Indique la relation tridimensionnelle supérieure et inférieure d'un élément dans la séquence de superposition.
Les éléments avec une valeur d'index z plus grande seront superposés aux éléments avec une valeur d'index z plus petite. Pour les objets positionnés pour lesquels cette propriété n'est pas spécifiée, les objets avec des valeurs d'index z positives se trouvent au-dessus d'eux et les objets avec des valeurs d'index z négatives sont en dessous d'eux.
<div style="width:200px;height:200px;"></div> <div style="position:relative; top:-50px; width:100px;height:100px;"><div>
Deux DIV, le second monte de 50px, la situation normale devrait être comme ça
Le deuxième div couvre le premier div, ajoutez l'attribut z-index au second
<div></div> <div><div> <p> Le résultat ressemblera à ceci, l'application la plus simple du z-index est comme ceci</p> <p><img title="Comment configurer une relation hiérarchique CSS" src="https://img.php.cn/upload/article/000/000/024/1d996561d6b4fe03194a5cc37c8b4c04-1.png" alt="Comment configurer une relation hiérarchique CSS" style="max-width:90%" style="max-width:90%" border="0"></p> <h3>Valable uniquement pour les éléments positionnés</h3> <p>L'attribut z-index convient aux éléments positionnés (la valeur de l'attribut position est relative ou absolue ou fixe objet), utilisé pour déterminer l'ordre d'empilement des éléments positionnés dans la direction perpendiculaire à l'écran d'affichage (appelée axe Z). C'est-à-dire que si l'élément n'est pas positionné, l'index z défini pour celui-ci sera invalide. </p><pre class="brush:html;toolbar:false"><div style="width:200px;height:200px;z-index:30"></div> <div style="position:relative; top:-50px; width:100px;height:100px;z-index:10;"><div>
Bien que le z-index du premier p soit plus grand que celui du deuxième p, puisque le premier p n'est pas positionné et que son attribut z-index ne fonctionne pas, il sera toujours couvert par le deuxième p.
Il y a en fait deux situations pour le même z-index
1 Si deux éléments ne sont pas positionnés, la position se chevauchera, ou bien. si les deux éléments ont été positionnés et z- Si la position du même index se chevauche, alors selon l'ordre du flux des documents, les derniers écraseront les précédents.
<div style="position:relative;width:200px;height:200px;"></div> <div style="position:relative; top:-50px; width:100px;height:100px;"><div>
2. Si aucun des éléments n'a de z-index défini, utilisez la valeur par défaut, l'un est positionné et l'autre n'est pas positionné, alors l'élément positionné couvre l'élément non positionné
<div style="position:relative;top:50px;width:200px;height:200px;"></div> <div style=" width:100px;height:100px;"><div>
Si l'élément parent Si z-index est valide, alors l'élément enfant sera cohérent avec l'élément parent, que le z-index soit défini ou non, et sera au-dessus de l'élément parent
<div style="position:relative;width:200px;height:200px;z-index:10;"> <div style="position:relative;width:100px;height:100px;z-index:-5;"><div> </div>
Bien que le z -index de l'élément enfant est défini pour être plus petit que l'élément parent, l'élément enfant apparaît toujours au-dessus de l'élément parent
Si le z-index de l'élément parent n'est pas valide (non positionné ou utilisant la valeur par défaut) , alors le paramètre z-index de l'élément enfant positionné prend effet
<div> <div> <div> </div> <p>z-index=-5 de l'élément enfant prend effet et est remplacé par l'élément parent</p> <p><img title="Comment configurer une relation hiérarchique CSS" src="https://img.php.cn/upload/article/000/000/024/eb75caa902e9aae6dbbb5eb9ed1d19eb-6.png" alt="Comment configurer une relation hiérarchique CSS" style="max-width:90%" style="max-width:90%" border="0"> </p> <h3>Éléments enfants entre frères</h3> <p>Si le z -index de l'élément frère prend effet, la relation de couverture de ses éléments enfants est déterminée par l'élément parent</p><pre class="brush:html;toolbar:false;"><div style="position:relative;width:100px;height:100px;z-index:5;"> <div style="position:relative;width:50px;height:250px;z-index:50;"></div> </div> <div style="position:relative;width:100px;height:100px;z-index:10;margin-top:4px;"> <div style="position:relative;width:30px;height:150px;z-index:-10;"></div> </div>
Bien que l'index z de l'élément enfant du premier div soit relativement élevé, en raison de son parent L'élément z- L'index est inférieur au deuxième div, donc le premier élément enfant div sera couvert par le deuxième div et ses éléments enfants
(Partage vidéo d'apprentissage : Tutoriel vidéo CSS)
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!