Warum interferiert der Überlauf mit dem Z-Index?

Ich versuche zu verstehen, die Regeln hinter Z-Index und wie es mit der Überlaufeigenschaft interagiert.Warum interferiert der Überlauf mit dem Z-Index?

Ich habe diesen HTML:

<body> 
    <div class="cell"> 
    Here is some text to keep things interesting 
    <div class="boxy"></div> 
    </div> 
</body>

Und diese css:

.boxy { 
    position: absolute; 
    z-index: 9999; 
    top:70px; 
    width: 50px; 
    height: 50px; 
    background: #0FF; 
} 

.cell { 
    border: 2px solid #F00; 
    position: relative; 

    /* comment these two lines out and the box appears */ 
    /* or change them both to 'visible' */ 
    /* changing only one of them to 'visible' does not work */ 
    overflow-y: auto; 
    overflow-x: auto; 
}

ich erwartet hätte, dass die Cyan-Box erscheint, obwohl es aus der Größe der div.cell, weil seine z -Index und seine Position sind festgelegt.

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 noch wichtiger, ich bin auf der Suche nach , warum dies geschieht. Wie werden die CSS- und Layoutregeln hier angewendet?

See my Plunkr. Dieses Beispiel ist natürlich eine stark vereinfachte Version des HTML/CSS, mit dem ich gerade arbeite.

EDIT Es scheint unten einige Verwirrung in den Antworten zu sein, weil ich die Dinge erklären, nicht gut genug. 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?

Quelle

2016-06-20 Andrew Eisenberg

entfernen Sie die Position –

Welche Position? Und warum sollte das funktionieren? Was sind die Regeln hier? –

Der Grund für das Cyan-Feld erscheint nur, wenn overflow-x und overflow-y sichtbar sind, und verschwindet sonst, ist einfach, weil das Cyan-Feld der Zelle Box ist überfüllt. overflow: visible bedeutet einfach "male dieses Feld, auch wenn es seinen umgebenden Block überläuft" - das Zellenfeld ist der umschließende Block des Cyan-Felds, weil sein position relativ ist. Alle anderen Werte von overflow bewirken, dass überlaufender Inhalt 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 Cyan-Box anzuzeigen, während die Zelle einen nicht sichtbaren Überlauf hat, ist, position: relative aus der Zelle zu entfernen und diese Deklaration auf das Elternelement der Zelle anzuwenden (in Ihrem Beispiel ist es der Körper). Wie folgt aus:

body { 
 
    position: relative; 
 
} 
 

 
.boxy { 
 
    position: absolute; 
 
    z-index: 9999; 
 
    top: 70px; 
 
    width: 50px; 
 
    height: 50px; 
 
    background: #0FF; 
 
} 
 

 
.cell { 
 
    border: 2px solid #F00; 
 
    overflow: auto; 
 
}

<div class="cell"> 
 
    Here is some text to keep things interesting 
 
    <div class="boxy"></div> 
 
</div>

Quelle

2016-06-20 06:05:02 BoltClock

OK. Ich denke, ich verstehe es jetzt. 'overflow' steuert, was mit DOM-Material außerhalb der sichtbaren Grenzen des Elements passiert. 'z-index' hat mit dem Stapeln von sichtbaren Elementen zu tun. Wenn also ein Element nicht sichtbar ist, kann es nicht gestapelt werden. Danke für die Klarstellung. ps - in der tatsächlichen Anwendung verwende ich serer Werte für Z-Index. 9999 sollte mir nur beweisen, dass es sich nicht um einen zu niedrigen Z-Index handelte. –

@Andrew Eisenberg: Das Element kann noch stapeln - Sie sehen es nur nicht, wenn der Überlauf nicht sichtbar ist. Aus diesem Grund wird das Layout nicht durch Scrollen beeinflusst. – BoltClock

Leider bedeutet dies, dass mein Ansatz nicht funktioniert, da er darauf beruht, dass '.boxy' eine Position relativ zu' .cell' hat. Indem ich die "position: relative" höher auf das DOM setze, muss ich JS verwenden, um die korrekte Positionierung jedes ".oxy" -Elements zu berechnen. –

Absolut positionierte Elemente tragen nicht zu den Dimensionen ihrer Eltern bei.

Daher hat das .cell DIV keinen Inhalt, der seine Abmessungen beeinflusst, wodurch es 100% breit und 0px hoch ist.

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).

Quelle

2016-06-20 03:50:21

Ich verstehe den Teil über die Zelle, die keine Dimensionen hat. Ich habe eine kleine Änderung an der Frage vorgenommen, damit das Eltern-Div Text enthält. Aber ich möchte nicht, dass die '.cell' eine Höhe haben. Ich füge das Element dem Z-Index hinzu, da ich möchte, dass es über den anderen Elementen schwebt. Mein Ziel ist es, einen klebrigen Tooltip zu erstellen, der sich mit dem Element, auf das er zeigt, bewegt. –

Ahh, ich verstehe deine Frage jetzt besser. Interessant. –

Interessant, in der Tat. :) Ich hoffe nur, dass ich ein dummes kleines Ding vermisse. –

Ihr Problem

ist Ihr Problem zu cell Knoten verwendet, die boxy versteckt, wenn overflow auf cell Knoten angegeben wird.

Der Grund

Der Grund ist, dass hinter boxy mit Position absolut nicht dazu beitragen, height von cell und overflow verbergen.

Warum wird es ohne Überlauf angezeigt?

standardmäßig overflow ist visible, die für Browser bedeutet für Überlauf Funktionalität Sonder nichts tun und es muss nicht Überlauf machen => nicht boxy verstecken.

Quelle

2016-06-20 03:52:04 gevorg

Das Hinzufügen der Höhe und Breite macht die '.cell' größer, aber das ist nicht was ich will. Ich möchte, dass '.boxy' über allen anderen Elementen außerhalb der' .cell' schwebt. –

@AndrewEisenberg dann verwenden Sie nur "relativ" statt "absolut", suchen Sie aktualisierte Version. – gevorg

Nicht wirklich. Das funktioniert nur, wenn Sie die Box in die Koordinaten der Zelle selbst verschieben. Ich möchte, dass die Box sichtbar ist, auch wenn sie außerhalb der Grenzen von ".cell" liegt. Dies passiert, wenn Sie einen Überlauf auskommentieren. –

Die Elternklasse Zelle muss eingestellt werden, es ist Höhe. weil Höhe von absolute Element es nicht beeinflusst, s Elternteil.

.boxy { 
     position: absolute; 
     z-index: 9999; 
     top:70px; 
     width: 50px; 
     height: 50px; 
     background: #0FF; 

    } 

    .cell { 
     border: 2px solid #F00; 
     position: relative; 

     /* comment these two lines out and the box appears */ 
     /* or change them both to 'visible' */ 
     /* changing only one of them to 'visible' does not work */ 
     overflow-y: auto; 
     overflow-x: auto; 
     min-height: 120px; /* height 70px(Top)+50px*/ 
    }

Quelle

2016-06-20 03:54:38

Das ist nicht was ich will. Ich möchte nicht, dass '.cell' seine Höhe basierend auf' .oxy' ändert. Sie können sehen, dass, wenn Sie die zwei "Überlauf" -Linien entfernen, das Feld angezeigt wird und es sich außerhalb der Position von ".cell" befindet. –

Warum interferiert der Überlauf mit dem Z-Index?

Antwort

Verwandte Themen