Question

后面的伪元素位于div .rotate的前面。似乎z-index: -1无效

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

Answer 1

尝试这个有用的https://jsfiddle.net/x061nock/ ::after使用默认颜色

如何在父节点后面放置伪元素？

1 个答案: