【修真院小课堂】z-index初解,工作原理
大家好,我是IT修真院武汉分院学员曾健,一枚正直纯洁善良的WEB程序员
今天给大家分享一下,修真院官网前端任务4,深度思考中的知识点——z-index初解,工作原理
一,背景介绍
1.含义:z-index属性指定了元素及其子元素的[z顺序],而[z顺序]可以决定当元素 发生覆盖的时候,哪个元素在上面。
通常一个较大的z-index值的元素会覆盖较低的那一个(前提是元素支持z-index值)。
2. 2.z-index的值
z-index:auto;默认值
z-index:<integer>;整数值
z-index:inherit;继承
3.基本特性
支持负值;
支持css3animation动画;
在css2.1时代,需要和定位元素配合使用;
二.知识剖析
1.z-index一般只对定位元素有作用
如图position:static是不起任何作用的
2.如果定位元素z-index没有发生嵌套,则遵循两个原则
后来居上准则:
HTML的dom流是分先后顺序的,一般来讲两个元素他们的css特性基本没什么差别的时候,当发生重叠的时候,一般是由后面
一个覆盖前面一个。
谁大谁上:
这个很好理解,谁的z-index值大,谁就在上面
3.如果定位元素z-index发生嵌套,也有一个原则
祖先优先原则:
如图,这里的子元素z-index完全是看父级z-index的大小
三.常见问题
为什么z-index为auto,祖先优先原则就不起作用了?
四.解决方案
官方文档规定当z-index为auto的时候,盒子不会创建一个新的层叠上下文。
五.编码实战
六.拓展思考
理解元素的层叠顺序
层叠顺序-stacking-order
表示元素发生层叠的时候有着特定的垂直显示顺序。
著名的7阶层叠水平
七.参考文献
参考一:深入理解z-index
八.常见问题
1.问:为何需要层叠顺序?
答:因为层叠顺序的意义就是规范元素重叠时候的呈现规则
2.问:为何是这个层叠顺序?
答:因为这种层叠顺序更符合页面加载的功能和视觉呈现!
3.问:内联元素真的会覆盖浮动元素?
答:如图可以看到
给这张图片设置了float:left,margin-right:-20px,文字覆盖在了图片上,因为文字是inline/inline-block水平元素