理解z-index和css中的层叠顺序问题(大神技术博的读后感?)
一直对 z-index不太理解,今天看到了大神的博客。。。http://www.zhangxinxu.com/wordpress/tag/z-index/
1、层叠上下文:是一个名词!是一个性质!此时网页元素在我眼里只有两类:有层叠上下文 和 没有层叠上下文的= =
有层叠上下文的元素比其他元素厉害,叠在上面。
可是层叠上下文内部也是有等级的,同样拥有层叠上下文的元素,层叠水平高的能叠在上面。
2、如何拥有层叠上下文?
1)含有position:relative/ position: absolute的元素(在chrome浏览器下,在设置了position:fixed的时候,当设置z-index:auto时,也会创建层叠上下文
2)设置 z-index:num;(如果没有设置z-index,那么默认值为 auto,不建立层叠上下文。设置为 0 则会建立层叠上下文。)//z-index只是决定层叠顺序中的一小部分!
3)元素的opacity(透明度)不是1时。(设置了opacity)
4)tranform值不是none。(设置了tranform)
5)mix-blend-mode值不是normal。(设置了mix-blend-mode)
6) filter值不为none
7)isolation值是isolate
8)wil-change指定的属性值为上面任意一个(这些还不太懂,先码了)
9)元素的webkit-overflow-scrolling设为touch
3、都拥有层叠上下文元素的相对顺序
1)如果层叠上下文元素不依赖z-index
数值,则其层叠顺序是z-index:auto
可看成z:index:0
级别;
2)如果层叠上下文元素依赖z-index
数值,则其层叠顺序由z-index
值决定。(z-index大就叠在上面啦)
(呐就是图里的大神)
最新文章
- WPF CheckBox样式 ScrollViewer样式 WrapPanel、StackPanel、Grid布局
- java温故系列之环境配置
- PyQt5应用与实践
- spring security 判断用户是否登录 只要登录就可以访问资源
- Linux SocketCan client server demo hacking
- 关于apple watch(苹果表)
- 在ubuntu12.0.4上搭建samba服务器以实现文件共享
- 使用JsPlumb绘制拓扑图的通用方法
- springMVC Helloword 入门程序
- nuget的问题, NuGet 程序包还原失败
- vue中展示数据
- [Oracle维护工程师手记]两表结合的MVIEW的告诉刷新
- pageresponse.min.js自动缩放页面改写
- css学习2
- 国内常用的几个NTP时间服务器
- 整数数字调节框QSpinBox
- android: 发送自定义广播
- 查看win10版本方法,及win10升级方法
- flask渲染模板时报错TypeError: 'UnboundField' object is not callable
- Request.Cookies 和 Response.Cookies 的区别