关于::before的问题

关于::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伪元素盒子上呢

正在回答

登陆购买课程后可参与讨论,去登陆

2回答

伪元素属于主元素的一部分 , 设置伪类before或者after , 实际上是相当于div的子元素 , 所以它们是没有办法设置层级关系的哦 . 祝学习愉快 ,望采纳

  • 浩浩吃 提问者 #1
    那就是说没有办法让伪元素盒子沉下去了么
    2018-09-07 23:38:25
Miss路 2018-09-09 11:43:56

本身伪元素和div本身在展现形式上属于父子关系,查看html结构时就能看出来:

http://img1.sycdn.imooc.com//climg/5b9496e30001f70004760196.jpg

也就是说伪元素,实际上是相当于div的子元素 , 所以它们是没有办法设置层级关系的,以为不是一个级别的,没有可比性。但是还有一个不是办法的办法,就是给伪元素设置z-index的?️为负值,原div

不做层级设置。但是这种方式不太建议,不是从根本上解决问题的,所以上一个老师没有作为一个解决方式告诉你。

同学要实现什么样的效果呢?可以把你的需求详细说一下,老师们可以帮助你给出实现的思路。

如果帮助到了你,欢迎采纳!

祝学习愉快!


问题已解决,确定采纳
还有疑问,暂不采纳

恭喜解决一个难题,获得1积分~

来为老师/同学的回答评分吧

0 星

相似问题

登录后可查看更多问答,登录/注册

响应式开发与常用框架 2018
  • 参与学习           人
  • 提交作业       2198    份
  • 解答问题       5012    个

如果你有web端基础,既想进阶,又想进军移动端开发,那就来吧,我们专题为你带来的课程有HTML5、CSS3、移动基础、响应式、bootstrap、less等,让你在前端道路上畅通无阻!

了解课程
请稍等 ...
意见反馈 帮助中心 APP下载
官方微信

在线咨询

领取优惠

免费试听

领取大纲

扫描二维码,添加
你的专属老师