web-dev-qa-db-fra.com

Flexbox, z-index & position: statique: Pourquoi ça ne marche pas?

Selon la spécification flexbox:

..4.3. Flex Item Z-Ordering, ... et z-index des valeurs autres que auto créent un contexte d'empilement même si position est static.

Donc je pensais z-index/opacity est censé fonctionner comme d'habitude avec flexbox mais quand je l'applique à ce HTML/CSS cela ne fonctionne pas (mon objectif était de mettre .header au dessus de .core création de deux couches):

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

J'ai utilisé les préfixes appropriés sur les propriétés flex. Je ne comprends pas pourquoi ça ne marche pas.

htmlcssz-indexflexbox
15
Paulo Janeiro

Comme vous l'avez écrit dans votre question, les éléments ne le faites pas doivent être positionnés pour z-index pour travailler dans un conteneur flexible.

Les éléments Flex peuvent participer à un z-index ordre d'empilement même avec position: static, ce qui n'est pas vrai pour les autres modèles de boîtes CSS (sauf Grid) où z-index ne fonctionne que sur les éléments positionnés.

4.3. Ordre Z des articles flexibles

Éléments flexibles Peindre exactement de la même manière que les blocs en ligne, sauf que order- l'ordre de document modifié est utilisé à la place de l'ordre de document brut, et z-index des valeurs autres que auto créent un contexte d'empilement même si position est static.

La raison z-index ne fonctionne pas dans votre code, c'est que div.header et div.core ne sont pas des éléments flexibles. Ce sont des enfants de body, mais body n'est pas un conteneur flexible.

Pour z-index pour travailler ici, vous devrez postuler display: flex à body.

Ajoutez ceci à votre code:

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

Démo révisée

Plus de détails: https://stackoverflow.com/a/35772825/3597276

15
Michael_B