Découvrez l'attribut z-index en CSS en trois minutes

Attribut z-index en CSS

Lorsque vous travaillez sur des projets, il est souvent utilisé pour faire apparaître un calque, puis dans ce calque Opérez sur le calque contextuel, et lorsque l'opération est terminée, fermez le calque contextuel ou cliquez ailleurs pour fermer le calque.

Habituellement, la valeur de l'indice z est définie dans le style p. Par exemple, si le calque parent définit l'indice z : 100, le calque enfant le définira sur une valeur supérieure à 100. Lorsque le calque parent apparaît. , le calque enfant peut être affiché.

Par exemple (écrivez brièvement) :

<p style="width: 100%;background: #fff;overflow: hidden;position: fixed;top: 0;left: 0;z-index: 100;height:300px" id="p1" >
 <p style="width: 100%;background: #fff;overflow: hidden;position: fixed;top: 0;left: 0;z-index: 101;height:100px" id="p2" >
 </p>
</p>

Fermez le calque contextuel : $("#p1").hide( //besoin de citer le fichier jquery .js

Nous pouvons également cliquer sur le reste du calque parent pour masquer le calque parent. Il suffit d'ajouter un événement sur p1 pour déclencher la fonction hide(). lors de l'exécution, j'ai découvert que lorsque je clique sur le calque enfant, l'événement p1 est également déclenché, fermant ainsi le calque contextuel. Évidemment, nous n'avons pas besoin de l'effet. Il n'y a évidemment aucun événement défini pour p2, alors pourquoi. déclenché? Comment le résoudre ?

Parce que quel que soit le niveau de votre enfant, l'événement parent sera déclenché et le réglage de z-index sur 10000 ne fonctionnera pas.

Solution :

$('#p2').click(function (e) {
            e.stopPropagation();
            return false;
        });

Ajoutez simplement un événement sur p2 et utilisez "e.stopPropagation();" pour éviter le bouillonnement, afin que l'événement p1 ne soit pas déclenché.

Merci à tous d'avoir lu, j'espère que vous en bénéficierez beaucoup

Cet article est reproduit à partir de : https://blog.csdn.net/lilinoscar/article/details/ 51860462

Tutoriel recommandé : "Tutoriel 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!