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.

Démonstration simple

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

Avec le même z-index, qui monte et qui descend ?

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>

Relation parent-enfant. traitement

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)