1

I know this Question is asked many times. But i can't find the problem in this. I have a div-Box with two pseudo-Elements (::after & ::before). They both have content property and position: absolute.

The pseudo Elements shoud be behind the parent-Element. So i set the Z-Index to 0 respectively -1.

But its not working?

CSS:

.brand {
  position: relative;
  width: calc((100% / 4) - 90px);
  height: 200px;
  background-color: blue;
  z-index: 0;
  float: left;
  padding: 30px;
  margin-right: 30px;
  margin-bottom: 30px;
   &:nth-child(4n) {
     margin-right: 0 !important;
 }
&::after,
&::before {
  content: "";
  width: 50px;
  height: 50px;
  background-color: pink;
  position: absolute;
  z-index: -1;
}

&::before {
  z-index: -1;
  top: -10px;
  left: -10px;
  border-top: 0px solid $theme_dark;
  border-left: 0px solid $theme_dark;
}
&::after {
  bottom: -10px;
  right: -10px;
  border-bottom: 0px solid $theme_dark;
  border-right: 0px solid $theme_dark;
}
}




<div class="brands">
 <div class="brand">
 <img src="typo3conf/ext/webcrunch_sitepackage/Resources/Public/Images/brands/Logo_Bull-Vodka_RGB.svg" alt="">
 </div>
 <div class="brand"></div>
 <div class="clear"></div>
 </div>

here is the fiddle: jsFiddle

thanks

Demian
  • 95
  • 7

1 Answers1

1

You can do it using CSS3 transforms. You added position:relative to parent so stacking context prevented it from going behind.

Add below style to .brand

transform-style: preserve-3d;

And add below to pseudo elements

transform: translateZ(-1px)

Working fiddle

bugwheels94
  • 30,681
  • 3
  • 39
  • 60
  • ❤️ ... thanks! Thats working great! its still confusing to me why z-index doesn't work ... – Demian Jan 21 '22 at 04:27
  • Read this when you free :https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context – bugwheels94 Jan 21 '22 at 04:32