Antworten auf deine Fragen:
Neues Thema erstellen

Box mit :after hinter andere Box positionieren funktioniert nicht

dn3d_fanboy

Aktives Mitglied

Hallo zusammen,

ich versuche mit CSS und :after eine Box hinter eine andere Box zu verschieben. Leider will es mir nicht gelingen und irgendwie bin ich mit meinem Latein so langsam am Ende.

Hier kann man den Code sehen: https://jsfiddle.net/ug9b3hj1/3/

Die rote, abgeschrägte Box soll hinter die Box (hellgrün) im Hintergrund, um so den Effekt einer unten schrägen Box zu erzielen. Allerdings wird hier z-index irgendwie ignoriert. Fülle ich Text in die hintere Box verhält sich der z-index allerdings korrekt.

Was übersehe ich oder mache ich da grundlegend etwas falsch?

Vielleicht kann mit hier jemand weiterhelfen.

Besten Dank im Voraus.
 

XenousPrime

Noch nicht viel geschrieben

Ich habe es hiermit gelöst.
:after ignoriert z-index. Ich musste einen übergeordneten Container erzeugen.

<div id="page-main" class="">

<div id="" class="">
<div id="container-main" class="">
<div class="over">
<div class="box"> </div>
<div class="box2">

</div></div>

</div>
</div>

</div>

#container-main {
background: #053d26;
display: flex;
flex-direction: row;
justify-content: center;
padding: 50px 0 100px 0;
}

.over {
position: relative;
min-height: 370px;
width: 280px;
z-index: 2;
}

.box {
background: #055534;
position: absolute;
padding: 0px;
min-height: 370px;
width: 300px;
z-index: 200;
}

.box2 {
display: block;
position: absolute;
min-height: 370px;
width: 300px;
content: '';
background: red;
transform: skew(0deg, -10deg);
transform-origin: top right;
z-index: 100;
}
 
Bilder bitte hier hochladen und danach über das Bild-Icon (Direktlink vorher kopieren) platzieren.
Antworten auf deine Fragen:
Neues Thema erstellen

Willkommen auf PSD-Tutorials.de

In unseren Foren vernetzt du dich mit anderen Personen, um dich rund um die Themen Fotografie, Grafik, Gestaltung, Bildbearbeitung und 3D auszutauschen. Außerdem schalten wir für dich regelmäßig kostenlose Inhalte frei. Liebe Grüße senden dir die PSD-Gründer Stefan und Matthias Petri aus Waren an der Müritz. Hier erfährst du mehr über uns.

Stefan und Matthias Petri von PSD-Tutorials.de

Nächster neuer Gratisinhalt

03
Stunden
:
:
25
Minuten
:
:
19
Sekunden

Neueste Themen & Antworten

Flatrate für Tutorials, Assets, Vorlagen

Zurzeit aktive Besucher

Statistik des Forums

Themen
118.633
Beiträge
1.538.446
Mitglieder
67.555
Neuestes Mitglied
scheflo
Oben