z-index之深入理解
来源:互联网 发布:手机聊天软件 编辑:程序博客网 时间:2024/06/05 05:47
此文为张鑫旭老师CSS深入了解系列课程的学习笔记,观看张老师的教学视频收益匪浅。
传送门http://www.imooc.com/u/197450/courses?sort=publish
特性:
1. 可以为负值
2. 支持CSS3 animation动画
3. 在CSS2.1时代,需要和定位元素配合使用
原则:
1. 后来居上
2. 大值居上
3. 祖先优先(z-index是负值不是auto)
层叠上下文的特征:
1. 层叠上下文可以嵌套,组成一个分层次的层叠上下文
2. 每个层叠上下文和兄弟元素独立:当进行层叠变化或渲染的时候,只需要考虑后代元素
3. 每个层叠上下文是自成体系的:当元素的内容被层叠后,整个元素被认为是在父层的层叠顺序中,不影响父层的层叠顺序
七阶层叠水平
Z-index和层叠上下文
1. 定位元素默认为z-index:auto可以看成是z-index:0
2. Z-index不为auto的定位元素会创建层叠上下文
3. Z-index层叠顺序的比较止步于父级层叠上下文
其他参与层叠上下文的元素:
1. Z-index值不为auto的flex项(父元素display:flex|inline-flex)
.box { display: flex; } 和 .box > div { z-index: 1; } 配合使用
2. 元素的opacity值不是1
3. 元素的transform值不是none
4. 元素的mix-blend-mode值不是normal
5. 元素的filter值不是none
6. 元素的isolation值是isolate
7. Position:fixed声明(Chrome等blink/webkit内核浏览器)
8. Wiil-change指定的属性值为上面任意一个
9. 元素的-webkit-overflow-scrolling设为touch
z-index实际使用:
1. 最小化影响原则
2. 不犯二原则
原因:多人协作以及后期维护
对于非浮层元素,避免使用z-index值,z-index值没有任何理由超过2
3. 组件层级计数器方法
目的:避免浮动组件因z-index被覆盖的问题
原因:
1.总会遇到意想不到的高层级元素
2.组件的覆盖规则具有动态性
做法:通过JS获取body元素下子元素的最大z-index值max,将浮动组件的z-index设为max+1
4. 可访问性隐藏
1) 将按钮的z-index设为-1
2) 设置按钮属性position:absolute; left:-99999px; top:-999999px;
3) 将按钮的display设为none
- z-index之深入理解
- css z-index深入理解
- CSS深入理解(2)z-index
- 深入研究z-index
- 深入了解 z-index
- 深入理解css中position属性及z-index属性
- 理解z-index
- 深度理解z-index
- css之z-index
- 关于z-index的理解
- 深入理解 index merge
- Flash开发之z-index
- css之z-index探讨
- 你真的理解z-index吗?
- 对css3属性 z-index的理解
- 理解 CSS 的 z-index 属性
- 深入理解css中的position定位和z-index属性,CSS的定位属性共有9个
- [转]z-index的IE之旅
- ROS入门入门
- JAVA发送GET请求
- kmp杂题2 poj1961Period
- Java(五)-内部类和异常类
- CCS与Matlab数据交换详解
- z-index之深入理解
- Oracle 12.2多租户架构中监听器监听到的数据库服务
- spfa && poj1860
- 对LinuxC课程的了解
- 专业程序员的道路
- qt tr()
- Ex2:改写Canny算法(只用CImg库)【code1】
- c语言总结小笔记——小包包的成长记
- Linux上安装JDK