z-index不在课后工作

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

如果您设置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 2

你应该这样使用： -

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 3

在div框中

创建一个新的div

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