wake-up-neo.com

Ist es möglich, die Stapelreihenfolge von Pseudoelementen unterhalb ihres übergeordneten Elements festzulegen?

Ich versuche ein Element mit dem :after CSS-Selektor für Pseudoelemente

#element {
    position: relative;
    z-index: 1;
}

#element::after {
    position:relative;
    z-index: 0;
    content: " ";
    position: absolute;
    width: 100px;
    height: 100px;
}

Es scheint wie das ::after Element kann nicht niedriger sein als das Element selbst.

Gibt es eine Möglichkeit, das Pseudoelement niedriger als das Element selbst zu halten?

cssz-indexpseudo-element
258
adardesign

Pseudo-Elemente werden als Nachkommen des zugehörigen Elements behandelt. Um ein Pseudoelement unter dem übergeordneten Element zu positionieren, müssen Sie ein neuer Stapelkontext erstellen, um die Standard-Stapelreihenfolge zu ändern.
Wenn Sie das Pseudoelement (absolut) positionieren und einen anderen Z-Indexwert als "auto" zuweisen, wird der neue Stapelkontext erstellt.

#element { 
    position: relative;  /* optional */
    width: 100px;
    height: 100px;
    background-color: blue;
}

#element::after {
    content: "";
    width: 150px;
    height: 150px;
    background-color: red;

    /* create a new stacking context */
    position: absolute;
    z-index: -1;  /* to be below the parent element */
}
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Position a pseudo-element below its parent</title>
</head>
<body>
  <div id="element">
  </div>
</body>
</html>
322
Arley

Ich weiß, dass dies ein alter Thread ist, aber ich habe das Bedürfnis, die richtige Antwort zu posten. Die eigentliche Antwort auf diese Frage lautet, dass Sie einen neuen Stapelkontext auf dem übergeordneten Element des Elements mit dem Pseudoelement erstellen müssen (und dass Sie ihm tatsächlich einen Z-Index geben müssen, nicht nur eine Position).

So was:

#parent {
    position: relative;
    z-index: 1;
}
#pseudo-parent {
    position: absolute;
    /* no z-index allowed */
}
#pseudo-parent:after {
    position: absolute;
    top:0;
    z-index: -1;
}

Es hat nichts mit der Verwendung von: vor oder: nach Pseudoelementen zu tun.

#parent { position: relative; z-index: 1; }
#pseudo-parent { position: absolute; } /* no z-index required */
#pseudo-parent:after { position: absolute; z-index: -1; }

/* Example styling to illustrate */
#pseudo-parent { background: #d1d1d1; }
#pseudo-parent:after { margin-left: -3px; content: "M" }
<div id="parent">
 <div id="pseudo-parent">
   &nbsp;
 </div>
</div>
236
Adam

Versuch es

el {
  transform-style: preserve-3d;
}
el:after {
  transform: translateZ(-1px);
}
43
Eugen Govorun

Es gibt zwei Probleme, die hier im Spiel sind:

  1. Die CSS 2.1-Spezifikation besagt, dass "The :beforeund :after Pseudo-Elemente Elemente interagieren mit anderen Feldern wie Run-In-Feldern, als wären sie echte Elemente, die direkt in das zugehörige Element eingefügt wurden. Ich kenne keine Möglichkeit, um Inhalte zu verschieben, die niedriger sind als der Z-Index des übergeordneten Elements im DOM, das in allen Browsern funktioniert.

  2. Nummer 1 oben bedeutet nicht unbedingt, dass es unmöglich ist, aber das zweite Hindernis ist schlimmer: Letztendlich ist es eine Frage der Browserunterstützung. Firefox unterstützte die Positionierung generierter Inhalte bis FF3.6 überhaupt nicht. Wer kennt sich mit Browsern wie IE aus. Selbst wenn Sie einen Hack finden, mit dem es in einem Browser funktioniert, ist es sehr wahrscheinlich, dass er nur in diesem Browser funktioniert.

Das Einzige, was ich mir vorstellen kann, was für alle Browser funktionieren wird, ist die Verwendung von Javascript, um das Element einzufügen, anstatt CSS. Ich weiß, das ist keine gute Lösung, aber die :before und :after Pseudo-Selektoren sehen einfach nicht so aus, als würden sie es hier abschneiden.

15
Gabriel Hurley

Apropos zur Spezifikation ( http://www.w3.org/TR/CSS2/zindex.html ), seit a.someSelector wird positioniert, um einen neuen Stapelkontext zu erstellen, aus dem seine untergeordneten Elemente nicht ausbrechen können. Verlassen a.someSelector unpositioniert und dann Kind a.someSelector:after kann im selben Kontext stehen wie a.someSelector.

11
cweider

Ich weiß, diese Frage ist uralt und hat eine akzeptierte Antwort, aber ich habe eine bessere Lösung für das Problem gefunden. Ich poste es hier, damit ich keine doppelte Frage erstelle und die Lösung anderen weiterhin zur Verfügung steht.

Ändere die Reihenfolge der Elemente. Verwenden Sie die :before Pseudoelement für den Inhalt, der darunter liegen soll, und passen Sie die Ränder an, um dies zu kompensieren. Die Randbereinigung kann chaotisch sein, aber das gewünschte z-index bleibt erhalten.

Ich habe dies mit IE8 und FF3.6 erfolgreich getestet.

9
D.N.

Setzen Sie z-index Des Pseudoelements :before Oder :after Auf -1 und geben Sie ihm eine position, die die Eigenschaft z-index (absolute, relative oder fixed). Dies funktioniert, weil das z-index Des Pseudoelements relativ zu seinem übergeordneten Element ist und nicht <html>, Was der Standard für andere Elemente ist. Was Sinn macht, weil sie untergeordnete Elemente von <html> Sind.

Das Problem, das ich hatte (das mich zu dieser Frage und der akzeptierten Antwort oben führte), war, dass ich versuchte, ein :after - Pseudoelement zu verwenden, um eine Phantasie mit einem Hintergrund für ein Element mit z-index Zu bekommen. von 15 und selbst wenn es mit einem z-index von 14 gesetzt wurde, wurde es immer noch über dem übergeordneten Element gerendert. Dies liegt daran, dass das übergeordnete Element in diesem Stapelkontext einen z-index Von 0 hat.

Hoffentlich hilft das ein wenig zu klären, was los ist.

4
Noah Erickson

Ich habe es ganz einfach behoben:

.parent {
  position: relative;
  z-index: 1;
}

.child {
  position: absolute;
  z-index: -1;
}

Damit wird das übergeordnete Element in z-index: 1 gestapelt, wodurch das untergeordnete Element in z-index: 0 "landen" kann, da andere dom-Elemente in z-index: 0 "existieren" Das übergeordnete Element hat einen Z-Index von 1, das untergeordnete Element liegt unter den anderen dom-Elementen und ist daher nicht sichtbar.

Dies funktioniert auch für Pseudoelemente wie : after

0
Wachem

Ich weiß nicht, ob jemand das gleiche Problem damit haben wird. Die ausgewählte Antwort ist teilweise richtig.

Was Sie brauchen, ist:

parent{
  z-index: 1;
}
child{
 position:relative;
 backgr
0
Rodrigo García