z-index 在 class 之后不工作

Question

我有伪元素 :after 并且将 position: absolute 与 z-index: 1 一起使用，但这与父元素 div 隐藏了，我该如何解决这个问题？

body {
  background: #2c3e50;
}
.box {
  height: 200px;
  width: 130px;
  background: #0c1e30;
  margin: 10px auto;
  transition: all 0.2s ease 0s;
  position: relative;
}
.box:after {
  content: '';
  height: 210px;
  width: 120px;
  background: #fff;
  position: absolute;
  z-index: 1;
  left: 0;
  top: 0;
}

<div class="box"></div>

Answer 1

你应该这样使用：-

body{background:  #2c3e50;}
.box{
 height: 200px;
 width: 130px;
 background:#0c1e30;
 margin: 10px auto;
 transition: all 0.2s ease 0s;
 position: relative;
 
 
}
.box:after{
 content: '';
 height: 210px;
 width: 120px;
 background: #fff;
 position: absolute;
 z-index: -1;
 left: 0;
 top:0;
 }

 <div class="box">
  
 </div>

Answer 2

如果您设置 z-index:1，那么它将位于其他 z-index 较低的项目之上。如果您希望 :after 出现在暗框下方，则必须降低 z-index 而不是增加它。

所以必须设置为z-index:-1

body {
  background: #2c3e50;
}
.box {
  height: 200px;
  width: 130px;
  background: #0c1e30;
  margin: 10px auto;
  transition: all 0.2s ease 0s;
  position: relative;
}
.box:after {
  content: '';
  height: 210px;
  width: 120px;
  background: #fff;
  position: absolute;
  z-index: -1;
  left: 0;
  top: 0;
}

<div class="box"></div>

Answer 3

在 div 框中创建一个新的 div

    <div class="box"><div style="position: absolute;z-index: 2;">my text</div></div>

z-index 在 class 之后不工作

z-index not working in after class

html

css

z-index