Comment le z-index d'un élément enfant peut-il être supérieur à la valeur z-index des frères et sœurs de son élément parent ?

Question

1. La description textuelle est la suivante : Il existe deux divs du même niveau, A et B. Le z-index de A est 888 et le z-index de B est 999. Il y a H sous A et le z-index vaut 1000, mais on constate que H n'est pas dans B. Peut-on placer H au-dessus de B sans changer la hiérarchie ? 2. La description du code est la suivante {code...} 3. Vous pouvez modifier n'importe quel style,...

学习ing · Answer

Selon la spécification, z-index est appliqué aux éléments positionnés , c'est-à-dire aux position属性不为relative éléments, sinon la définition de z-index n'a pas de sens ; la première consiste à le définir dans la
pile actuelle. Le niveau dans le contexte (contexte d'empilement) ; la seconde consiste à créer un nouveau contexte d'empilement z-index ne signifie pas que plus la valeur est élevée, plus elle sera proche de l'utilisateur, elle est également liée à le contexte d'empilement ;

Éléments dans le même contexte d'empilement, plus le z-index est élevé, plus ils sont proches de l'utilisateur ;
Éléments dans différents contextes d'empilement. Si le contexte d'empilement 1 est plus proche de l'utilisateur, alors tous ses éléments enfants sont devant les éléments enfants d'un autre contexte d'empilement, qui est plus proche de l'utilisateur. Éléments enfants dans différents contextes d'empilement Pas de croisement. possible;
Donc, le z-index n'est en fait pas une valeur absolue, mais une valeur relative
;

Les exemples sont les suivants :

body {
    margin: 0;
}

.p1 {
    width: 700px;
    height: 700px;
    background: red;
}

.p1p1 {
    width: 300px;
    height: 300px;
    background: green;
    position: absolute;
    top: 0px;
    left: 0px;
    z-index: 500;
}

.p1p1p1 {
    width: 200px;
    height: 200px;
    background: yellow;
    position: absolute;
    z-index: 10;
}

.p2 {
    width: 600px;
    height: 600px;
    background: pink;
    position: absolute;
    z-index: 400;
    top: 0;
}

.p2p1 {
    width: 500px;
    height: 500px;
    background: blueviolet;
    position: absolute;
    z-index: 800;
}

Pour .p1p1p1 et .p2p1, bien que le z-index (800) de ce dernier soit supérieur au premier (10), c'est parce que le z-index (500) du contexte de pile (.p1p1) où le premier est situé est plus haut que la pile où se trouve ce dernier. Le z-index (400) du contexte (.p2p1), donc le premier est au dessus de ce dernier.

Vous avez défini

dans le commentaire, car 9>0, donc l'img est en haut. p{z-index:9;position:relative;}会建立一个新的堆叠上下文，和p同级的元素是0，img元素是9 -1

Selon votre question, en fait, l'attribut position ne peut pas être modifié. Si vous modifiez l'attribut position en relatif, alors votre attribut z-index ne fonctionnera pas lorsque z-index fonctionne, il n'y a aucun moyen de répondre à vos exigences. les raisons suivantes :

A 888
H 888 1000
B 999

Les niveaux de A, B et H sont comme ci-dessus Parce que 888 <

扔个三星炸死你 · Answer

Je ne peux pas. Parce que vos H et B sont tous deux position: absolute, on peut considérer que le décalage de l'élément en position absolue sur l'axe z est bien supérieur à la quantité qui peut être définie par l'index z (on peut considérer que l'élément en position absolue a un décalage z infini). Par conséquent, l’indice z des deux éléments H et B ne joue aucun rôle.

Après avoir supprimé position: absolute, le code est le suivant


    

        This is a heading

Effet :

学习ing · Answer

Tout d'abord, A, B et H sont tous positionnés de manière absolue, puis l'index z, B> A, naturellement, B bloque A, H est à l'intérieur de A et est positionné de manière absolue en A, donc naturellement il bloque H, résolu Le La méthode consiste à définir l'index z, A>B. Avec cette disposition, le z-index de H n'a aucune signification réelle (tant que A est couvert, H est également couvert) ! A moins que H ne soit pas dans A !

迷茫 · Answer

Vous pouvez imaginer que chaque élémentz-index都声明了一个平面世界，平面世界的高度就是z-index的值。而子元素的z-index est comparé dans ce monde.

代言 · Answer

Si le z-index externe est plus petit que le premier, il n'y a aucun moyen de faire en sorte que les nœuds enfants du premier dépassent le second. Cependant, dans ce cas, le premier peut bloquer tous les seconds. donc l'affiche change toujours H de Retirez les paramètres de niveau correspondants de A et vous pourrez obtenir l'effet

ringa_lee · Answer

Le parent ne peut pas restreindre la position des éléments enfants