CSS深入理解之z-index_技术问答

首页免费课 CSS深入理解之z-index 问答

CSS深入理解之z-index

                
                张鑫旭
            页面重构设计

                    查看讲师更多课程 
                    张鑫旭讲师的其他课程
                
CSS深入理解之border
中级·56801
免费课程
                                
CSS深入理解之padding
中级·52482
免费课程
                                
CSS深入理解之margin
中级·55944
免费课程
                                
CSS深入理解之relative
中级·47920
免费课程
                                
CSS深入理解之vertical-align
中级·39338
免费课程
                                
CSS深入理解之line-height
中级·43086
免费课程
                                
                难度中级
            
                时长 1小时 5分
            
                学习人数
            
综合评分9.57
                            167人评价
                        查看评价
                                9.8
                                内容实用
                            
                                9.5
                                简洁易懂
                            
                                9.4
                                逻辑清晰

全部评论问答未解决精华

qq_ChuanceyYin_0

迷迷糊糊,

0 6-1 其他CSS属性与层叠上下文

2017-11-09

qq_ChuanceyYin_0

还是七阶层级水平图有用,1s就懂了,

1 4-1 层叠顺序

2017-11-09

rambuild

.box是img的容器。1，当都没有设置z-index时。img是内联元素， .box是块级元素。根据层叠顺序，此时图片会在容器上方显示；2，当图片设置z-index = -1容器不设置z-index时。根据层叠顺序，z-index为负值的元素的层叠顺序在块级元素之下，所以此时容器覆盖了图片；3，当图片设置z-index = -1同时容器设置z-index = 0时，此时容器创建了层叠上下文，根据层叠顺序，z-index为负值的元素在层叠上下文之上，所以此时图片在容器中显示。

4 5-1 z-index与层叠上下文

2017-11-02