Box mit :after hinter andere Box positionieren funktioniert nicht

dn3d_fanboy · 26.10.2024

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.

Dudlhofer · 27.10.2024

Ich denke nicht, dass Du das mit ::after hinbekommst - damit kannst Du keinen HTML-Content erzeugen, sondern nur den Content eines Elements erweitern: https://kulturbanause.de/blog/generierter-css-content-mit-before-und-after/

Myhar · 04.11.2024

Abgeschrägte boxen etc. kann man eigentlich besser mit clip path erstellt werden https://www.sarasoueidan.com/blog/css-svg-clipping/ oder auch https://developer.mozilla.org/en-US/docs/Web/CSS/clip-path (hier kann gleich beim ersten Beispiel einzelne Beispiele ausgewählt werden)

XenousPrime · 18.11.2024

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;
}