Maison  >  Article  >  interface Web  >  Comment configurer une relation hiérarchique CSS

Comment configurer une relation hiérarchique CSS

青灯夜游
青灯夜游original
2021-07-21 18:45:398952parcourir

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.

Comment configurer une relation hiérarchique CSS

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

Comment configurer une relation hiérarchique CSS

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.

Comment configurer une relation hiérarchique CSS

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>

Comment configurer une relation hiérarchique CSS

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>

Comment configurer une relation hiérarchique CSS

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

Comment configurer une relation hiérarchique CSS

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

Comment configurer une relation hiérarchique CSS

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

html5 css css3 对象 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:Comment écrire une ombre de bordure en CSSArticle suivant:Comment écrire une ombre de bordure en CSS

Articles Liés

Voir plus