CSS déborde: l'auto n'est pas valide. La valeur négative de l'élément parent Z-Index est-elle le coupable?

Échec de la barre de défilement CSS Dépannage: overflow: auto Cause et solution

Dans CSS, lors de la création de barres de défilement à l'aide overflow: auto , vous rencontrez parfois le problème que les barres de défilement sont affichées mais ne peuvent pas faire défiler. Cet article analysera un cas et fournira des solutions.

Description du problème: un conteneur avec overflow: auto , la hauteur du contenu dépasse le conteneur, la barre de défilement apparaît, mais il ne peut pas faire défiler. z-index de l'élément parent du conteneur est négative.

Extrait de code problème:

 hauteur: 250px;
Dimensionnement en boîte: Border-Box;
Border-Bottom: 1px solide # 000;
Color d'arrière-plan: #eee;
débordement: auto;
Scroll-Snap-Type: Y obligatoire;
Position: relative;
Z-Index: 99;

Le conteneur a une hauteur de 250px et overflow: auto est réglé, mais le défilement n'est pas valide car z-index de l'élément parent est une valeur négative.

Analyse des causes: z-index contrôle l'ordre d'empilement des éléments. Une valeur z-index négative indique que l'élément est situé en dessous d'autres éléments. Un z-index négatif de l'élément parent peut obscurcir l'élément enfant, ce qui ne peut pas répondre aux interactions utilisateur, même si l'élément enfant z-index est une valeur positive.

Solution: vérifiez l' z-index de l'élément parent, définissez-le sur une valeur non négative ou ajustez les valeurs de l' z-index des éléments parents et enfants pour s'assurer que les éléments enfants sont visibles et interactifs.

Exemple de code qui peut faire défiler normalement:

<div class="box">
  <div>123</div>
  <div>123</div>
  
</div>

.boîte {
  hauteur: 150px;
  Dimensionnement en boîte: Border-Box;
  Border-Bottom: 1px solide # 000;
  Color d'arrière-plan: #eee;
  débordement: auto;
  Scroll-Snap-Type: Y obligatoire;
  Position: relative;
  Z-Index: 99;
}

Dans cet exemple, le conteneur peut être défilé normalement et la clé est de s'assurer que z-index de l'élément parent n'affecte pas l'affichage et l'interaction de l'élément enfant. S'assurer que la valeur Z-Index de l'élément parent n'est pas en conflit avec l'élément enfant est la clé pour résoudre le problème.

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!