一、z-index语法、支持的属性值等
z-index规定了元素(包括子元素)的垂直z方向的层级顺序,
z-index可以决定哪个元素覆盖在哪个元素上边。(这个学过ps的,想象一下图层的概念,z-index就像是调整图层的上下顺序。)
z-index在css2.1中需要和定位元素(position为relative、absolute、fixed、sticky等这些)配合使用才有作用。
z-index:auto; z-index:整数值;(支持负值和animation动画) z-index:inherit;
二、z-index与层级表现的几种情况:
1. 普通元素中不设置z-index的情况下:
2. 定位元素的嵌套父元素设置了z-index的情况下:
三、z-index与层叠上下文
z-index新建层叠上下文
四、层叠上下文和层叠水平
1. 层叠上下文(stacking context)
- 1. z-index值不为auto的flex项(父元素display:flex|inline-flex,且子元素的z-index值不为auto)
- 2. 元素的opacity值不是1
- 3. 元素的transform值不是none
- 4. 元素mix-blend-mode(混合效果)值不是normal
- 5. 元素的(css3)filter值不是none
- 6. 元素的isolation值不是isolate
- 7. position:fixed声明(chrome等blink/webkit内核浏览器中)
- 8. will-change指定的属性值为上面任意一个
- 9. 元素的-webkit-overflow-scrolling设为touch。
2. 层叠水平(stacking level)
3. 普通元素也有层叠水平
7阶层叠水平(stacking level)
五、其他需要注意的:
六、两种通过z-index创建层叠上下文的情况:
2018-09-05 13:48:54
css笔记 - 张鑫旭css课程笔记之 z-index 篇的更多相关文章
-
css笔记 - 张鑫旭css课程笔记之 float 篇
https://www.imooc.com/t/197450float float的设计初衷/原本作用-是为了实现文字环绕效果如,一个图片和一段文字垂直放置,给图片加上浮动,文字就环绕图片展示了. 浮 ...
-
css笔记 - 张鑫旭css课程笔记之 vertical-align 篇
支持负值的属性: margin letter-spacing word-spacing vertical-align 元素vertical-align垂直对齐的位置与前后元素都没有关系元素vertic ...
-
css笔记 - 张鑫旭css课程笔记之 overflow 篇
overflow基本属性值 visible(默认值):超出依然显示 hidden :超出隐藏 scroll :超出,滚动显示.子元素不超出也会有滚动条的那条轨道. auto:如果超出,滚动显示.如果不 ...
-
css笔记 - 张鑫旭css课程笔记之 line-height 篇
一.line-height line-height: 指两行文字基线之间的距离. 行高200px表示两行文字基线之间的距离是200px: 二.基线:baseline 字母x下边缘的位置 基线是任意线定 ...
-
css笔记 - 张鑫旭css课程笔记之 padding 篇
[padding地址](https://www.imooc.com/learn/710) 一.padding与容器尺寸之间的关系 padding会影响元素的尺寸(通常情况下是通过增加/挤压内容区域) ...
-
css笔记 - 张鑫旭css课程笔记之 margin 篇
margin - 人若犯我,我必犯人! [margin地址](https://www.imooc.com/learn/680) 一.margin与容器尺寸的关系 relative可定位,但是不改变容器 ...
-
css笔记 - 张鑫旭css课程笔记之 relative 篇
relative地址 relative 对 absolute的限制作用 限制left/top/right/bottom(方位值)定位 限制描述:absolute设置了方位值时,这些方位值是相对于pos ...
-
css笔记 - 张鑫旭css课程笔记之 absolute 篇
absolute地址 absolute绝对定位 绝对定位与浮动鲜为人知的兄弟关系 即是说,absolute后,元素和浮动元素的特性差不多,只不过absolute脱离文档流,元素飘在天上,float还在 ...
-
css笔记 - 张鑫旭css课程笔记之 border 篇
border地址 border特性: 能形成BFC但是不能清除浮动.但是bfc也是把子元素的margin包裹进来,但是拿自己的margin穿透没办法的. 边框宽度不支持百分比 透明border可以突破 ...
随机推荐
-
http://www.cnblogs.com/youring2/archive/2011/03/28/1997694.html
http://www.cnblogs.com/youring2/archive/2011/03/28/1997694.html
-
Mac 下 Intellij IDEA 2016.1.2+maven+jetty+ JRebel 6.4.3 破解+spring mvc
准备阶段: Intellij IDEA 2016.1.2 (官方下载,作者下载的是社区版): JRebel for IntelliJ插件安装,可选择在线安装,在线安装的是最新版,我选择本地安装, 下 ...
-
Android 手机卫士14--Widget窗口小部件AppWidgetProvider
1.AndroidManifest.xml根据窗体小部件广播接受者关键字android.appwidget.action.APPWIDGET_UPDATE 搜索android:resource=&qu ...
-
winform 通过 html 与swf 交互 简单案例
在上一篇 winform 与 html 交互 简单案例 中讲了winform与html之间的简单交互,接下来的内容是在winform中以html为中转站,实现将swf嵌入winform中并实现交互. ...
-
windows下搭建PHP环境
1.Apache 下载地址:http://httpd.apache.org/download.cgi 下载之后进入CMD,/Apache/bin/httpd.exe -k install 进行安装 提 ...
-
Day56
今天干啦啥呢 早上七点起来 天气冷了真起不来啊 再坚持坚持就好了 今天上午九点开始考数据库 我去 大学四年第一次感觉到这样的爽 作弊的爽啊 也没有完全的作弊啦 是开卷考试,反正做的很顺利了. 我和胡 ...
-
(转)ikvmc的使用
IKVM.NET是一个针对Mono和微软.net框架的java实现,其设计目的是在.NET平台上运行java程序.本文将比较详细的介绍这个工具的原理.使用入门(如何java应用转换为.NET应用.), ...
-
Struts2大约Action系统培训6大约action的接受三个参数的方法
我们知道,action在web它在控制器的发展起到了一定作用,通过接收client来到参数,运行不同的模块只实现运营,因此,接收参数是非常重要的组成部分,有接收到的参数的仅前端.操作权限运行数据库后端 ...
-
利用Needleman–Wunsch算法进行DNA序列全局比对
生物信息学原理作业第二弹:利用Needleman–Wunsch算法进行DNA序列全局比对. 具体原理:https://en.wikipedia.org/wiki/Needleman%E2%80%93W ...
-
关机充电如何实现短按pwrkey灭屏
目前关机充电PWRKEY实现长按开机和短按亮屏功能,灭屏是根据BL_SWITCH_TIMEOUTS时间,自动灭屏的:如果需要实现PWRKEY主动灭屏,请按照如下方法修改: alps/media ...