or kurzem habe ich auf @ beleuchtein interessanter Artikel über die CSS-Eigenschaft z-index. Ich habe es gefunden, weil ich nach einer Antwort gesucht habe, warum übergelaufener Text aus einem vorhergehenden Div über dem Hintergrund eines folgenden Div angezeigt wurde, aber nicht über dem Hintergrund eines Bereichs in dem folgenden Div, wie hier jsfiddle):

#overflowed {
  background-color: green;
  width: 300px;
  height: 100px;
}
#non-floated {
  background-color: pink;
  width: 300px;
}
#non-floated span {
  background-color: yellow;
}

Die Erklärung dafür ist die Tatsache, dass ein Browser Elemente in einer bestimmten Reihenfolge zeichnet, die auf der sogenannten Stapelreihenfolge basiert:

So für das Root-Element in einem Layout und jedes positionierte Element erstellt der Browser eine solche Stapelreihenfolge und zeichnet dann alle diese Reihenfolgen in der entsprechenden Reihenfolge, sorry für das Wortspiel.

So ist das, waruminline Elemente und Text (diejenigen, die @ erstellinline boxes) werden über Block-Level-Elementen gezeichnet, auch wenn diese Block-Elemente später in einem Dokument erscheinen, wie oben in meinem jsfiddle.

So die Frage selbst.

Ich kann immer noch keine Antwort finden, warum dieseinline boxes, wenn sie erstellt wurden, werden Inline-Elemente und Text innerhalb eines Floated-Elements nicht mit anderen Inline-Feldern gezeichnet, die sich außerhalb des Floated-Elements befinden, wie hier jsfiddle):

#overflowed {
  background-color: green;
  width: 300px;
  height: 100px;
}
#floated {
  background-color: pink;
  width: 300px;
  float: left;
}
#floated span {
  background-color: yellow;
}

Hier können Sie deutlich sehen, dass der Text aus dem ersten Teil des Dokuments, der nicht schwebend ist, über (nach) dem gelben Hintergrund des Bereichs gezeichnet wird, während der Bereich ein Inline-Element ist und dem Bild der Stapelreihenfolge entspricht Das obige soll nach dem schwebenden Container (Hintergrund und Rahmen) gezeichnet werden.

Also hat jemand eine nachgewiesene Erklärung dafür? Ich nehme an, dass schwebende Elemente so etwas wie ihre eigene Stapelreihenfolge erzeugen, wie positionierte Elemente, aber ich habe noch keine Erwähnung im Web gefunden.