Flexbox, Z-Index & Position: statisch: Warum funktioniert es nicht?

Gemäß flexbox-Spezifikation:Flexbox, Z-Index & Position: statisch: Warum funktioniert es nicht?

..4.3. Flex-Artikel Z-Bestellung, ... und z-index andere Werte als auto erstellen einen Stapelkontext, auch wenn positionstatic ist.

So, dachte ich z-index/opacity soll mit Flexbox wie gewohnt arbeiten, aber wenn ich es auf diese HTML/CSS wenden Sie es nicht (mein Ziel nicht funktioniert war .header oben auf .core die Schaffung von zwei Schichten zu setzen):

.header { 
 
    opacity: 0.5; 
 
    z-index: 2; 
 
    display: flex; 
 
    align-items: center; 
 
    justify-content: flex-end; 
 
} 
 
.headerLeft { 
 
    z-index: inherit; 
 
    background-color: blue; 
 
    text-align: right; 
 
    align-self: stretch; 
 
    flex: 2 1 250px; 
 
} 
 
.headerCenter { 
 
    z-index: inherit; 
 
    background-color: red; 
 
    text-align: right; 
 
    align-self: stretch; 
 
    flex: 1 1 175px; 
 
} 
 
.headerRight { 
 
    z-index: inherit; 
 
    background-color: green; 
 
    text-align: right; 
 
    align-self: stretch; 
 
    flex: 1 1 100px; 
 
} 
 
.core { 
 
    z-index: 0; 
 
    display: flex; 
 
    flex-flow: row wrap; 
 
    align-items: center; 
 
    justify-content: space-around; 
 
} 
 
.coreItem { 
 
    align-self: stretch; 
 
    flex: 1 1 400px; 
 
}

<body> 
 
    <div class="header"> 
 
    <div class="headerLeft">Left</div> 
 
    <div class="headerCenter">Center</div> 
 
    <div class="headerRight">Right</div> 
 
    </div> 
 
    <div class="core"> 
 
    <div class="coreItem">Core1</div> 
 
    <div class="coreItem">Core2</div> 
 
    <div class="coreItem">Core3</div> 
 
    <div class="coreItem">Core4</div> 
 
    <div class="coreItem">Core5</div> 
 
    <div class="coreItem">Core6</div> 
 
    </div> 
 
</body>

ich richtige Präfixe auf flex Eigenschaften verwendet. Ich verstehe nicht, warum es nicht funktioniert.

Quelle

2015-10-28 Paulo Janeiro

Wie Sie in Ihrer Frage geschrieben haben, müssen die Elemente nicht für z-index positioniert werden, um in einem flexiblen Container zu arbeiten.

Flex lassen sich auch mit position: static, die für andere CSS-Box-Modelle nicht wahr ist (außer Grid), wo z-index funktioniert nur auf positionierte Elemente in einem z-index Stapelreihenfolge teilnehmen.

4.3. Flex Item Z-Ordering

Flex Lakieren genau die gleichen wie Inline-Blöcke, mit Ausnahme dass order -modifizierte Dokument, um anstelle von rohem Dokument verwendet wird, und z-index andere Werte als auto einen Stapelkontext erstellen auch wenn positionstatic ist.

Der Grund z-index ist in Ihrem Code arbeiten, ist, dass div.header und div.core sind nicht flex Elemente. Sie sind Kinder von body, aber body ist kein Flex-Container.

Damit z-index hier funktionieren, müssen Sie display: flex auf body anwenden.

Fügen Sie diese auf Ihren Code:

body { 
    display: flex; 
    flex-direction: column; 
}

Revised Demo

Weitere Details: https://stackoverflow.com/a/35772825/3597276

Quelle

2015-10-28 15:07:26

Flexbox, Z-Index & Position: statisch: Warum funktioniert es nicht?

Antwort

Verwandte Themen