CSS -Überlauf: Auto ist ungültig. Ist der negative Wert des übergeordneten Elements z-Index der Täter?

CSS -Scroll -Stangenfehler Fehlerbehebung: overflow: auto Ursache und Lösung

Beim Erstellen von Scrollbars mit overflow: auto -Attribut stoßen Sie in CSS manchmal auf das Problem, dass die Bildlaufleisten angezeigt werden, aber nicht scrollen können. Dieser Artikel analysiert einen Fall und liefert Lösungen.

Problembeschreibung: Ein Container mit overflow: auto -Set, die Inhaltshöhe überschreitet den Container, die Bildlaufleiste erscheint, kann jedoch nicht scrollen. z-index -Attributwert des übergeordneten Elements des Containers ist negativ.

Problemcode -Snippet:

 Höhe: 250px;
Kastengrößen: Border-Box;
Grenzboden: 1PX Solid #000;
Hintergrundfarbe: #eee;
Überlauf: Auto;
Scroll-SNAP-Typ: y obligatorisch;
Position: Relativ;
Z-Index: 99;

Der Container hat eine Höhe von 250px und overflow: auto ist festgelegt, aber das Bildlauf ist ungültig, da z-index des übergeordneten Elements ein negativer Wert ist.

Ursache Analyse: z-index steuert die Stapelreihenfolge von Elementen. Ein negativer z-index Wert zeigt an, dass sich das Element unter anderen Elementen befindet. Ein negativer z-index des übergeordneten Elements kann das untergeordnete Element verdecken, sodass es nicht in der Lage ist, auf Benutzerinteraktionen zu reagieren, auch wenn das untergeordnete z-index ein positiver Wert ist.

Lösung: Überprüfen Sie das z-index des übergeordneten Elements, setzen Sie es auf einen nicht negativen Wert oder passen Sie die z-index -Werte der Eltern und Kinderelemente an, um sicherzustellen, dass die Kinderelemente sichtbar und interaktiv sind.

Beispielcode, der normal scrollen kann:

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

.Kasten {
  Höhe: 150px;
  Kastengrößen: Border-Box;
  Grenzboden: 1PX Solid #000;
  Hintergrundfarbe: #eee;
  Überlauf: Auto;
  Scroll-SNAP-Typ: y obligatorisch;
  Position: Relativ;
  Z-Index: 99;
}

In diesem Beispiel kann der Container normal gescrollt werden, und der Schlüssel besteht darin, sicherzustellen, dass z-index des übergeordneten Elements die Anzeige und Interaktion des untergeordneten Elements nicht beeinflusst. Wenn Sie sicherstellen, dass der Z-Index-Wert des übergeordneten Elements nicht mit dem untergeordneten Element in Konflikt steht, ist es der Schlüssel zur Lösung des Problems.

Das obige ist der detaillierte Inhalt vonCSS -Überlauf: Auto ist ungültig. Ist der negative Wert des übergeordneten Elements z-Index der Täter?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!