关于::before的问题
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.zero{
position: absolute;
}
.one{
width: 100px;
height:100px;
background: red;
position: absolute;
z-index: 1;
}
.two{
width: 100px;
height:100px;
background: black;
position: absolute;
z-index: 2;
}
.one::before{
content: "";
width: 120px;
height: 120px;
background: green;
position: absolute;
padding: 5em;
z-index: 2;
}
</style>
</head>
<body>
<div class="zero">
<div class="one"></div>
<div class="two"></div>
</div>
</body>
</html>
为什么给一个div设置了::before伪元素盒子,这个伪元素盒子就一直盖在原div的上面,无论怎么设置原div和伪类盒子的z-index的值都不能让div盒子盖在伪元素盒子上面
但是用另外一个div盒子又能盖在之前设置的伪元素盒子上
有什么办法可以让原div盒子盖在他设置的::before伪元素盒子上呢
正在回答
伪元素属于主元素的一部分 , 设置伪类before或者after , 实际上是相当于div的子元素 , 所以它们是没有办法设置层级关系的哦 . 祝学习愉快 ,望采纳
- 参与学习 人
- 提交作业 2198 份
- 解答问题 5012 个
如果你有web端基础,既想进阶,又想进军移动端开发,那就来吧,我们专题为你带来的课程有HTML5、CSS3、移动基础、响应式、bootstrap、less等,让你在前端道路上畅通无阻!
了解课程
恭喜解决一个难题,获得1积分~
来为老师/同学的回答评分吧
0 星