CSS-Übergang und Z-Index

Question

Ich habe eine feste Top-Navbar mit Dropdown-Menüs. Ich möchte die Dropdown-Menüs bei Hover verschieben. Ich möchte, dass das Menü beim Einschieben hinter der Navbar steht. Also habe ich einfach versucht, die z-index der beiden Elemente einzustellen, was leider nicht für mich funktioniert hat.

Hier ist ein vereinfachtes Beispiel (codepen)

html

<div class="fixed-top"> 
    <span class="trigger">hover me</span> 
    <div class="menu"></div> 
</div> 

css

.fixed-top { 
    background: #3b5999; 
    height: 50px; 
    width: 100%; 
    padding: 0; 
    top: 0; 
    position: fixed; 
    z-index: 2; 
} 

.trigger { 
    z-index: 2; 
    font-size: 33px; 
    color: white; 
    margin-left: 50%; 
} 

.trigger:hover + .menu { 
    margin-top: 0; 
} 

.menu { 
    z-index: 1; 
    height: 300px; 
    background-color: #1c7754; 
    width: 400px; 
    margin: auto; 
    margin-top: -400px; 
    transition: all 0.75s ease-out; 
} 

Falls es nicht klar, was ich hier eine einfache mspaint Skizze machen wollen;)

Answer 1

Versuchen Sie, das Code-Snippet auszuführen.

.fixed-top { 
 
    background: #3b5999; 
 
    height: 50px; 
 
    width: 100%; 
 
    padding: 0; 
 
    top: 0; 
 
    position: fixed; 
 
    z-index: 2; 
 
} 
 

 
.trigger { 
 
    font-size: 33px; 
 
    color: white; 
 
    margin-left: 50%; 
 
    width: 100%; 
 
    height: 50px; 
 
    top: 0; 
 
    position: fixed; 
 
    z-index: 3; 
 
} 
 

 
.trigger:hover + .menu, 
 
.menu:hover{ 
 
    margin-top: 0; 
 
} 
 

 
.menu { 
 
    z-index: 1; 
 
    height: 300px; 
 
    background-color: #1c7754; 
 
    width: 400px; 
 
    margin: auto; 
 
    margin-top: -400px; 
 
    transition: all 0.75s ease-out; 
 
}

<div class="fixed-top"></div> 
 
<span class="trigger">hover me</span> 
 
<div class="menu"></div>

Answer 2

Ich denke, das ist das, was Sie wollen.

CSS-Code

.fixed-top { 
    background: #3b5999; 
    height: 50px; 
    width: 100%; 
    padding: 0; 
    top: 0; 
    position : fixed; 
} 

.trigger { 
    z-index: 500; 
    font-size: 33px; 
    color: white; 
    margin-left: 50%; 
    position : absolute; 
} 

.trigger:hover + .menu { 
    margin-top: 0; 
} 

.menu { 
    z-index: -9999; 
    position : relative; 
    height: 300px; 
    background-color: #1c7754; 
    width: 400px; 
    margin: auto; 
    margin-top: -400px; 
    transition: all 0.75s ease-out; 
} 

    <div class="fixed-top"> 
    <span class="trigger">hover me</span> 
    <div class="menu"></div> 
</div> 

hier ist der Hinweis, dass Sie

http://www.smashingmagazine.com/2009/09/the-z-index-css-property-a-comprehensive-look/

Answer 3

Dies ist eine extrem häufige Fehler überprüfen kann, wenn sie mit Stapeln von Kontexten in CSS zu arbeiten beginnen. Im Grunde müssen Sie nur daran denken, dass ein Kind nicht in einem anderen Stapelkontext von einem Elternteil existieren kann.

Also, wenn ich ein nicht-statisches Element habe (was ein Element mit position: anything-but-static [fixed, relative, absolute] bedeutet), und wenn dieses Element kein nicht-statisches Elternelement hat, dann wird es auf Stapelebene 1 sein, egal wo es sich befindet DOM. Wenn dieses Element ein nicht statisches untergeordnetes Element hat, befindet sich dieses untergeordnete Element in der Stapelkontextebene 2. Es kann sich nicht auf derselben Ebene (Ebene 1) wie sein übergeordnetes Element befinden. z-index kann nur Elemente auf der gleichen Stapelkontextebene betreffen, es hat nichts mit Elementen auf verschiedenen Stapelkontextebenen zu tun.

Die Lösung ist Ihr HTML restrukturieren, oder einfach nur einen :before oder :after Pseudoelement verwenden, also:

.fixed-top { 
    height: 50px; 
    width: 100%; 
    padding: 0; 
    top: 0; 
    position: fixed; /* The parent: stacking context level 1 */ 
} 
.fixed-top:before { 
    background: #3b5999; 
    content:''; 
    position: absolute; /* stacking context level 2 */ 
    top: 0; right: 0; bottom: 0; left: 0; 
    z-index: 1; 
} 
.trigger { 
    color: white; 
    font-size: 33px; 
    margin-left: 50%; 
    position: relative; /* also stacking context level 2 */ 
    z-index: 2; 
} 
.trigger:hover + .menu { 
    margin-top: 0; 
} 
.menu { /* bottom layer -- no stacking context necessary */ 
    z-index: 0; 
    height: 300px; 
    background-color: #1c7754; 
    width: 400px; 
    margin: auto; 
    margin-top: -400px; 
    transition: all 0.75s ease-out; 
} 

Beachten Sie die Kommentare der Stapelkontext Ebenen bezeichnet.

Und hier ist ein JSFiddle für ein Beispiel.