关于z-index里面的一个问题,老师?

关于z-index里面的一个问题,老师?

这里的顺序原则有点没明白,后面的节点为什么就能遮住前面的节点呢?B不是应该在A盒子的下面吗?假设A和B都是块级元素时?

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

例如我写的这个例子里面:

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>绝对定位</title>
   <style>
   .parent{ width: 400px;height: 400px;background: red;}
   .son{ width: 100px;height: 100px;
       top:50px;left:50px;
       background: yellow;
       position: relative;
   }
   .son1{
       position: relative;
       left: 80px;top:80px;
       background:blue ;
       width:100px;
       height: 100px;}
   </style>
</head>
<body>
<div class="parent">
  <div class="son">A</div>
   <div class="son1">B</div>
</div>
</body>
</html>

虽然son1在son下面,可是B没有遮挡住A呀?老师。这不是不符合顺序原则了吗?

正在回答 回答被采纳积分+1

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

1回答
Steve007 2019-02-26 09:55:26

同学,你好。

1.顺序规则是js中规定的,如果不对节点设置position属性,位于文档流后面的节点就会遮住前面的节点,同学只要记住这个规则就可以了。

2.当A和B重叠时,B是可以将A遮挡住的,如图:

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

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

祝学习愉快!



  • 提问者 shine62 #1
    好的,谢谢老师,可不可以这么理解?在给两个盒子都设置定位为relative时,这里所说的遮挡住是指我们通过设置它的left,top属性可以实现后面的盒子覆盖在前面的盒子上面,但不代表任意给一个参数都可以实现后者覆盖在前者的上面。
    2019-02-26 11:43:37
  • Steve007 回复 提问者 shine62 #2
    同学,你好。是这样的,同学理解的没错
    2019-02-26 13:57:13
问题已解决,确定采纳
还有疑问,暂不采纳

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

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

0 星
请稍等 ...
意见反馈 帮助中心 APP下载
官方微信

在线咨询

领取优惠

免费试听

领取大纲

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