Pourquoi le survol du filtre Webkit modifie-t-il l'ordre d'empilement et comment l'inverser ?

Pourquoi le survol du filtre Webkit modifie l'ordre d'empilement

Lorsque vous appliquez un filtre Webkit à une image en survol, vous remarquerez peut-être un changement inattendu dans son ordre d'empilement. Cela est dû à la création d'un contexte d'empilement par le filtre.

La propriété de filtre Webkit, lorsqu'elle est définie sur une valeur autre que none, établit un contexte d'empilement. Un contexte d'empilement est un espace tridimensionnel dans lequel les éléments sont empilés dans l'ordre de leur inclusion dans l'arborescence du document ou par la propriété z-index. Cela signifie que les éléments dans le contexte d'empilement apparaîtront toujours au-dessus des éléments en dehors du contexte.

Dans votre cas, le filtre Webkit appliqué à l'image crée un contexte d'empilement. L'élément image est placé dans ce contexte, tandis que le "contenu de la diapositive" DIV positionné de manière absolue est en dehors du contexte. Lorsque vous survolez l'image, le filtre est appliqué, créant le contexte d'empilement et provoquant l'empilement de l'image au-dessus du DIV, l'obscurcissant.

Inverser l'effet

Pour éviter que le DIV positionné de manière absolue ne soit masqué, vous pouvez soit supprimer le filtre Webkit, soit définir sa valeur sur aucun au survol. Voici un CSS mis à jour :

<code class="css">li a:hover img {
  -webkit-filter: none; /* or filter: none; to remove the filter altogether */
}</code>

Cela désactivera le filtre au survol, permettant au DIV de s'afficher correctement sans utiliser l'indexation z.

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!