有关z-index堆叠顺序问题·

1

2

3

4

5

6

7

8

9

 /*顶部*/
    .header{
        width: 100%;
        height: 80px;
          background: #07cbc9;
        position:fixed;
        overflow: hidden;
        zoom:1;
        z-index: 10;

老师，你好！这是css作业中顶部层级为10，这是怎么算的，它为什么是10呢，读了教辅还是搞不明白。谢谢！

江7856 2019-03-10

源自：CSS定位（position） 2-14 编程练习

0

收起

4回答

Steve007 回答被采纳获得+3积分 2019-03-11 10:28:58

同学，你好。顶部要求在其它所有页面之上显示，因此它的层级要比页面的其它内容的最高层级要高。

这里的值不是固定的，比如除了header的其它内容的最高层级是9，那么header的层级就要大于9，设为10或11，12,13都是可以的，

祝学习愉快！

提问者江7856 2019-03-16 12:43:26

老师，你好，感谢你的解答。

我需要暂停一段时间的学习，期间还能看到编程练习的解答吗，在运用的过程中，有时还需要参考学过的内容，买了前端入门的课程，是否可以随意浏览呢？谢谢！

好帮手慕星星 #1

同学你好，到期之后，课程和资料都是可以的看的 , 到期之后还享有的如下 , 作为参考哦 1）视频可以永久观看 2）辅助材料可以下载 3）选择题可以提交，不可以看解析 4）编程题只提供编写功能，不能提交，可以查看自己的代码 5）作业只能编写，不能提交，可以下载自己提交过的源码 6）考试题不能看 7）问答只可以看见自己提问的 8）笔记可以查祝学习愉快！

2019-03-17 09:56:23

提问者江7856 2019-03-12 21:25:38

老师，你好！顶部区域没有层叠呀，下面banner区有遮罩层，而层叠都是2，？？

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

.topLayer{
               position: absolute;
               background-color:#000;
              width: 100%;
               height: 600px;
              top: 80px;
              opacity: 0.5;
             z-index: 2
     }
    .banner1{
               width:384px;
               height:380px;
               position: absolute;
               top: 140px;
               right: 50%;
              margin-right:-230px;
              z-index:2;

Steve007 #1

同学，你好。顶部区域设置了固定定位，没有设置层级。当滚动条滚动时，它的位置是不发生变化的，因为banner区遮罩层设置了层级为2，因此会将低于它层级的顶部区域给覆盖，因此要给顶部区域设置高于banner区遮罩层的层级值。祝学习愉快！

2019-03-13 09:53:24
提问者江7856 #2

老师，你好，感谢解答，那么banner区遮罩层与被遮罩层的图片层级都是z-index:2，这算是元素a覆盖元素b吗？谢谢

2019-03-14 19:13:27
Steve007 回复提问者江7856 #3

同学，你好。两个相同定位的元素，设置了相同的层级，这种情况后面的元素会覆盖前面的元素。在这里也就是banner1盒子会覆盖topLayer盒子，在topLayer盒子上面显示。

2019-03-15 13:45:50

提问者江7856 2019-03-11 19:05:26

老师，你好，层级是指什么？谢谢

Steve007 #1

同学，你好。层级就是指元素的堆叠顺序，比如元素A将元素B覆盖，将元素A显示了出来，就是指A元素的层级高于B元素的层级。

2019-03-12 10:12:35

相似问题

z-index默认设置

老师边框怎么加边框，怎么让文字漂浮在图片上

老师为什么z-index:9;z-index:1;不是应该相差8吗怎么还会重叠呢

为什么给label设置z-index没有效果呢？

有关z-index堆叠顺序问题·

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

前端小白入门系列课程

参与学习人
提交作业 11218 份
解答问题 36712 个

从一个不会编程的小白到一个老司机是需要过程的，首先得入门，学习基础知识，然后才能进阶，最后再到精通，本专题是你走进前端世界的不二选择！

本课精华内容

问答作业

为什么我的没有框

5 45

表格的问题

377 41

大家好,body前面有一个红色的小××，麻烦大家帮我看看

378 40

到底是cellspacing还是cellpacing?

0 35

课间活动的表格怎么实现，想了很久也想不出来

60 30

查看更多本课问答

请稍等 ...

购课补贴
联系客服咨询优惠详情

帮助反馈 APP下载

慕课网APP
您的移动学习伙伴

扫描二维码
关注慕课网微信公众号