-
在做层叠样式时，任何时候都不要超过2
查看全部 -
position 默认为 static 另外还有 relative absolute fixed sticky
查看全部 -
z-index:auto 默认值
z-index:<integer> 整数值
z-index:inherit 继承
查看全部 -
1、最小化影响原则
目的：避免z-index嵌套层叠关系混乱
原因：
(1)元素的层叠水平主要由所在的层叠上下文决定
(2)IE7 z-index:auto也会新建层叠上下文
做法：
(1)避免使用定位属性
(2)定位属性从大容器平级分离为私有小容器
2、不犯二准则
目的：避免z-index混乱，一山比一山高的样式问题
原因：多人协作以及后期维护
做法：对于非浮层元素，避免设置z-index值，z-index值没有任何道理需要超过2——不犯二准则
3、组件层级计数器
目的：避免浮层组件因z-index被覆盖的问题
原因：
(1)总会遇到意想不到的高层级元素；
(2)组件的覆盖规则具有动态性
做法：组件层级计数器方法
（通过js活得body下子元素的最大z-index值）
4、负值z-index与可访问性隐藏
z-index负值元素在层叠上下文的背景之上，其他元素之下
查看全部 -
z-index笔记
查看全部 -
更完整的7阶层叠水平
查看全部 -
其他参与层叠上下文的属性：
查看全部 -
一旦容器z-index值为数值，图片的层叠上下文元素就变成了容器！
z-index要点
查看全部 -
7阶层层叠作用
查看全部 -
元素的层叠顺序（stacking order）
7阶层层叠水平
查看全部 -
层叠上下文（stacking context）是HTML元素中的一个三维概念，表示元素在z轴上有了“可以高人一等”
页面根元素天生具有层叠上下文
z-index值为数值的定位元素也具有层叠上下文
其他属性……
层叠水平（stacking level）
层叠上下文中的每个元素都有一个层叠水平，决定了同一个层叠上下文中元素在z轴上的显示顺序
遵循“后来居上”和“谁大谁上”的层叠准则
普通元素也有层叠水平
层叠上下文几个特性
查看全部 -
如果定位元素z-index没有发生嵌套：
1、后来居上的准则；
2、哪个大，哪个上；
如果定位元素z-index发生嵌套：
1、祖先优先原则；（前提 值是数值，不是auto）
2、
查看全部 -
z-index与定位元素
查看全部 -
不考虑css3，只有定位元素（position:relative/absolute/fixed/sticky）的z-index才有作用！
z-index基本特性
查看全部
举报