Ich versuche die Regeln hinter dem Z-Index zu verstehen und wie er mit der Überlaufeigenschaft interagiert.
Ich habe diesen HTML:
%Vor%Und dieses CSS:
%Vor% Ich hätte erwartet, dass die Cyan-Box erscheint, obwohl sie außerhalb der Größe von div.cell liegt, weil ihr Z-Index und ihre Position gesetzt sind.
Die Cyan-Box kann jedoch nur angezeigt werden, indem Sie die Zeilen overflow-x und -y auskommentieren.
Meine Frage ist: Wie kann ich die Cyan-Box auf dem Bildschirm erscheinen lassen, während der Überlauf entweder versteckt oder automatisch bleibt? Aber was noch wichtiger ist, ich möchte verstehen, warum das passiert. Welche CSS- und Layout-Regeln werden hier angewendet?
Siehe mein Plunkr. Dieses Beispiel ist natürlich eine viel vereinfachte Version des HTML / CSS, das ich bin tatsächlich mit arbeiten.
BEARBEITEN
Es scheint einige Verwirrung in den Antworten unten zu geben, weil ich die Dinge nicht gut genug erklärt habe. Wenn Sie die zwei Überlauflinien kommentieren, können Sie sehen, dass die Cyan-Box erscheint. Es erscheint außerhalb der Grenze von .cell . Warum passiert das? Wie kann ich die Cyan-Box erscheinen lassen, während Überlauf und Z-Index immer noch versteckt sind?
Der Grund, warum die Cyan-Box nur dann angezeigt wird, wenn overflow-x und overflow-y sichtbar sind und ansonsten verschwinden, liegt einfach daran, dass die Cyan-Box die Zellenbox überfüllt. overflow: visible bedeutet einfach "male diese Box, auch wenn sie den umgebenden Block überfließt" - die Zellenbox ist der umschließende Block der Cyanbox, weil position relativ ist. Alle anderen Werte von overflow bewirken, dass überlaufender Inhalt aus der Ansicht abgeschnitten wird. Hier läuft nichts Besonderes; Insbesondere ist der Z-Index völlig irrelevant und es gibt keine Interaktion, wie der Titel der Frage aufzeigt (und es gibt wirklich keinen Grund, sie auf eine so große Zahl zu setzen, es sei denn, Sie machen sich Sorgen, dass Skripte andere Elemente in die Zelle einfügen) ).
Die einzige Möglichkeit, die Cyanbox anzuzeigen, während die Zelle einen nicht sichtbaren Überlauf aufweist, besteht darin, position: relative aus der Zelle zu entfernen und diese Deklaration auf das übergeordnete Element der Zelle anzuwenden (in Ihrem Beispiel ist dies der Text). . So:
Absolut positionierte Elemente tragen nicht zu den Dimensionen ihrer Eltern bei.
Daher hat das .cell DIV keinen Inhalt, der sich auf seine Dimensionen auswirkt, wodurch es 100% breit und 0px hoch wird.
Um das Element erscheinen zu lassen, müssen Sie .cell eine Höhe hinzufügen, die das DIV umfasst, in diesem Fall 120px (70px oben + 50px Höhe).
Die Elternklasse Zelle muss auf die Höhe eingestellt sein. weil die Höhe von absolute -Element dies nicht beeinflusst; s übergeordnet.
Ihr Problem
Ihr Problem hängt mit cell node zusammen, der boxy ausblendet, wenn overflow auf cell node angegeben ist.
Der Grund
Der Grund dafür ist, dass boxy mit der absoluten Position nicht zu height von cell beiträgt und overflow sie versteckt.
Warum wird es ohne Überlauf angezeigt?
Standardmäßig overflow ist visible , was für den Browser bedeutet, dass nichts Besonderes für die Überlauffunktion tut und es nicht nötig ist, overflow = & gt; versteckt boxy nicht.