In CSS 2.1,z-index gilt nur für positionierte Elemente und gibt zwei verschiedene Dinge an:

Die Stapelebene der Box im aktuellen Stapelkontext. Ob die Box einen Stapelkontext erstellt.

Aber Flexbox sagt das:

Flex items paint genau das gleiche wie inline blocks [CSS21], außer dassorder -modifizierte Dokumentreihenfolge wird anstelle der Rohdokumentreihenfolge verwendet, undz-index Werte außerauto einen Stapelkontext erstellen, auch wennposition iststatic.

Dann, im Gegensatz zu CSS2.1, setzenz-index auf eine ganze Zahl auf einem nicht positionierten flexiblen Element erstellt einen Stapelkontext.

Ich sehe jedoch nirgendwo definiert, welche Stapelebene in diesem Stapelkontext verwendet werden soll.

Ein ähnlicher Fall istopacity, das auch Stapelkontexte für nicht positionierte Elemente erstellen kann. In diesem Fall ist die Stapelebene jedoch ordnungsgemäß mit 0 angegeben:

Wenn ein Element mit einer Deckkraft von weniger als 1 nicht positioniert ist, müssen Implementierungen die von ihm erstellte Ebene im übergeordneten Stapelkontext in derselben Stapelreihenfolge zeichnen, die verwendet würde, wenn es ein positioniertes Element mit @ wärz-index: 0 undopacity: 1.

Meiner Meinung nach sind diese Optionen angemessen:

Die Stapelebene ist der in @ angegebene Wer z-index Die Stapelebene ist 0Das Flex-Element hüllt die untergeordneten Elemente in einen Stapelkontext ein, sodass sie zusammen gezeichnet werden. Das Flex-Element selbst wird jedoch als normales nicht positioniertes In-Flow-Element gezeichnet (als hätte es keinen Stapelkontext erstellt).

ntsprechend dem folgenden Test machen sowohl Firefox als auch Chrome die erste Option.

.container {
  display: flex;
  padding-left: 20px;
}
.item {
  padding: 20px;
  background: #ffa;
  align-self: flex-start;
  margin-left: -20px;
}
.item:nth-child(even) {
  background: #aff;
  margin-top: 40px;
}
.za::after{ content: 'z-index: auto'; }
.z0 { z-index: 0; } .z0::after{ content: 'z-index: 0'; }
.z1 { z-index: 1; } .z1::after{ content: 'z-index: 1'; }
.z-1 { z-index: -1; } .z-1::after{ content: 'z-index: -1'; }

<div class="container">
  <div class="item z1"></div>
  <div class="item z0"></div>
  <div class="item za"></div>
  <div class="item za"></div>
  <div class="item z-1"></div>
</div>

Ist dieses Verhalten irgendwo definiert?