Lösung für Überlauf: versteckter Fehler in CSS

Ursache des Fehlers

Als ich heute ein Karussell schrieb, stellte ich fest, dass overflow;hidden; fehlschlagen konnte. Der Grund ist folgender: Wenn das übergeordnete Element die überlaufenden absolut positionierten untergeordneten Elemente verbergen möchte, muss es dem übergeordneten Element eine Positionierung hinzufügen; denn die absolut positionierten untergeordneten Elemente suchen von innen nach außen nach dem positionierten übergeordneten Element, und wenn sie es nicht finden können, schlägt auch overflow:hidden; fehl.

Hör zu

Es ist wichtig, wie oben erwähnt zu wiederholen, dass der Grund, warum overflow:hidden; fehlschlägt, darin liegt, dass, wenn das übergeordnete Element das überlaufende absolut positionierte untergeordnete Element verbergen möchte, es dem übergeordneten Element eine Positionierung hinzufügen muss; denn das absolut positionierte untergeordnete Element sucht von innen nach außen nach dem positionierten übergeordneten Element, und wenn es das übergeordnete Element nicht finden kann, schlägt overflow:hidden; ebenfalls fehl.

Versuchen wir es:

(1)

<Stil>
    .Verpackung{
        Breite: 200px;
        Höhe: 200px;
        Hintergrundfarbe: rot;
        Überlauf: versteckt;                 
     }
     .Inhalt{
         Breite: 200px;
         Höhe: 200px;
         Hintergrundfarbe: grün;
         Position: absolut;
         oben: 100px;
         links: 100px;
      }
</Stil>
<Text>
     <div Klasse="Wrapper">
         <div Klasse="Inhalt"></div>
     </div>
</body>

Wenn das untergeordnete Element absolut positioniert ist, ist es offensichtlich, dass overflow:hidden; ungültig ist

(2)

<Stil>
    .Verpackung{
        Breite: 200px;
        Höhe: 200px;
        Hintergrundfarbe: rot;
        Überlauf: versteckt;      
        Position: relativ;           
    }
    .Inhalt{
        Breite: 200px;
        Höhe: 200px;
        Hintergrundfarbe: grün;
        Position: absolut;
        oben: 100px;
        links: 100px;
     }
</Stil>
<Text>
    <div Klasse="Wrapper">
        <div Klasse="Inhalt"></div>
    </div>
</body>

Wir müssen dem übergeordneten Element lediglich eine Positionierung hinzufügen, entweder absolut oder relativ (beachten Sie jedoch, dass bei einer absoluten Positionierung das übergeordnete Element die Elemente unterhalb der Y-Achse beeinflusst), sodass das absolut positionierte untergeordnete Element das übergeordnete Element finden kann und overflow:hidden; nicht fehlschlägt.

Das Obige ist der vollständige Inhalt dieses Artikels. Ich hoffe, er wird für jedermanns Studium hilfreich sein. Ich hoffe auch, dass jeder 123WORDPRESS.COM unterstützen wird.