0

http://codepen.io/pen/YZdpgb

The pseudo-element after is on front of the div .rotate. It seems that the z-index: -1 is not working

HTML

<div class="box--container">
  <div class="box--rotate">
    <div class="box">
      <p>my background should be the light grey :(</p>
    </div>
  </div>
</div>

CSS

body {
  height: 80vh;
  margin: 10vh 10vw;
}
.box--container {
  position: relative;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  text-align: center;
}

.box--rotate {
  position: relative;
  width: 250px;
  height: 250px;
  transform: rotate(45deg);
  transform-origin: 100% 150%;
  background: #ccc;
  z-index: 1;
  &::after {
    position: absolute;
    content: '';
    width: 100%;
    height: 100%;
    background: #F2C398;
    top: 15px;  
    left: 15px;
    z-index: -1;
  }
}

.box {
  position: relative;
  top: 50%;
  transform: rotate(-45deg) translateY(-50%);
  z-index: 10;
}
Andrew Li
  • 55,805
  • 14
  • 125
  • 143
castlenibill
  • 448
  • 1
  • 6
  • 14
  • 1
    Possible duplicate of [How to make child element upper than parent with z-index](http://stackoverflow.com/questions/16057361/how-to-make-child-element-upper-than-parent-with-z-index) – Abhishek Pandey Mar 31 '17 at 05:25
  • 1
    You’ll need another wrapper; `transform` makes a stacking context. https://codepen.io/anon/pen/JWwEXz – Ry- Mar 31 '17 at 05:36
  • Transform is causing the problem! – Sahil Dhir Mar 31 '17 at 05:37

1 Answers1

0

try this one it's helpful https://jsfiddle.net/x061nock/ ::after use default color

lalit bhakuni
  • 607
  • 5
  • 15