Analyse und Lösung des Grundes, warum overflow-y: visible; in CSS nicht funktioniert

Szenario

Eine aktuelle Anforderung ist eine h5-Seite für Mobilgeräte, die eine Reihe auswählbarer Karten erfordert. Der Teil, der über den Container hinausgeht, kann nach links und rechts verschoben werden, und jede Karte muss in der oberen linken Ecke eine Löschschaltfläche haben. Wie unten dargestellt:

Ich dachte: So einfach, fügen Sie einfach max-width: 200px; white-space: nowrap; overflow-x: auto; zum übergeordneten Container hinzu und die Sache ist erledigt. Die Demo sieht wie folgt aus:

<div Klasse="Container">
  <div Klasse="Sohn">
    <div Klasse="delete_btn"></div>
  </div>
  <div Klasse="Sohn">
    <div Klasse="delete_btn"></div>
  </div>
  <div Klasse="Sohn">
    <div Klasse="delete_btn"></div>
  </div>
</div>
.container {
  maximale Breite: 500px;
  Überlauf-x: automatisch;
  Leerzeichen: Nowrap;
}
.Sohn {
  Anzeige: Inline-Block;
  Breite: 200px;
  Höhe: 200px;
  Hintergrundfarbe: hellblau;
  Position: relativ;
  Rand rechts: 20px;
}
.delete_btn {
  Breite: 20px;
  Höhe: 20px;
  Position: absolut;
  oben: 0;
  links: 0;
  Hintergrundfarbe: rot;
  transformieren: versetzeX(-50%) versetzeY(-50%);
}

Ich dachte, alles lief gut, aber das Ergebnis, das ich erhielt, war wie folgt:

Schauen Sie sich das rote Quadrat in der oberen linken Ecke des Rechtecks ​​an. Ein Teil des ursprünglichen roten Quadrats von 20 x 20 ist verborgen. Ich dachte, es läge an einem Überlauf und habe versucht, das Problem mithilfe von „overflow-y: visible;“ zu lösen, aber das hat nicht funktioniert. Aufmerksame Freunde sollten bedenken, dass der Standardwert des Überlaufs sichtbar ist. Was ist also der Grund?

Warum

Nach langer Suche habe ich die folgenden Gründe grob verstanden

Die berechneten Werte von „overflow-x“ und „overflow-y“ sind dieselben wie ihre angegebenen Werte, außer dass einige Kombinationen mit „visible“ nicht möglich sind: Wenn einer als „visible“ angegeben ist und der andere „scroll“ oder „auto“, dann wird „visible“ auf „auto“ gesetzt. Der berechnete Wert von „overflow“ ist gleich dem berechneten Wert von „overflow-x“, wenn „overflow-y“ gleich ist; andernfalls ist es das Paar berechneter Werte von „overflow-x“ und „overflow-y“.
Dies bedeutet, dass wenn „overflow-x“ auf „scroll“ oder „auto“ eingestellt ist, „overflow-y“ auf „auto“ eingestellt ist und umgekehrt. Das ist sehr peinlich. Wie lösen wir dieses Problem?

PS: Der obige Absatz stammt aus dem W3C-Dokument, aber ich konnte den Originaltext nach langer Suche nicht finden. Wenn Sie ihn finden, hinterlassen Sie bitte einen Link ~ [Manueller Hundekopf]

Wie

Schließlich möchte ich immer noch, dass das rote Quadrat in der oberen linken Ecke vollständig angezeigt wird. Was ist also die Lösung? Hier verwende ich den folgenden Stil, um ihn dem Container hinzuzufügen

Polsterung oben: 20px;
Rand oben: -20px;

Das Prinzip ist eigentlich ganz einfach. Nach dem Hinzufügen von padding-top: 20px; hat das absolut positionierte rote Quadrat Platz zum Anzeigen und überschreitet nicht das Containervolumen. Dann wird die Positionsänderung um margin-top: -20px; ausgeglichen. Wie in der Abbildung gezeigt

PS: Der abgedeckte Teil auf der linken Seite des ersten roten Quadrats wird mit der gleichen Idee gelöst, d. h. durch die Verwendung von „padding-left“ und „margin-left“.

Zusammenfassen

Oben finden Sie die vom Herausgeber eingeführte Analyse und Lösung der Gründe, warum „overflow-y: visible;“ in CSS nicht funktioniert. Ich hoffe, es wird allen helfen. Wenn Sie Fragen haben, hinterlassen Sie mir bitte eine Nachricht und der Herausgeber wird Ihnen rechtzeitig antworten. Ich möchte auch allen für ihre Unterstützung der Website 123WORDPRESS.COM danken!