css笔记 - 张鑫旭css课程笔记之 z-index 篇
一、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可以突破 ...
随机推荐
- MongoDB多文档查询
db.getCollection('transactionCompensation').find( { "$and":[ { "status":{ " ...
- winfrom 使用NPOI导入导出Excel(xls/xlsx)数据到DataTable中
1.通过NUGET管理器下载nopi,在引入命令空间 using System; using System.Collections.Generic; using System.Text; using ...
- Bind 和 ScaffoldColumn
今天看了music MVC源码看到这么一段代码 Bind 和 ScaffoldColumn [MetadataType(typeof(FormMetaData))] public partial cl ...
- linux的awk命令解读
转自:http://blog.csdn.net/guoer9973/article/details/44650729 awk是行处理器: 相比较屏幕处理的优点,在处理庞大文件时不会出现内存溢出或是处理 ...
- APK防反编译技术
APK防反编译技术 下载地址:地址 我们的APK实际上就是一个ZIP压缩文件,里面包括有一个classes.dex.我们编译后生成的程序代码就所有在那里了, 通过apktool等工具能够轻松地将它们反 ...
- LinuxMint下的Orionode源码安装
1. Orionode介绍 Eclipse-orion是Eclipse项目下面的一个子项目,orion是一个在在线版的代码编辑环境.其介绍参考http://wiki.eclipse.org/Orion ...
- 在Unity3d中调用外部程序及批处理文件
如果调用外部普通应用程序, 比如notepad.exe 这样调用 static public bool ExecuteProgram(string exeFilename, string workDi ...
- springmvc+jquery实现省市区地址下拉框联动
参考资料:http://www.cnblogs.com/whgw/archive/2012/05/11/2496667.html 1.jsp页面实现 <%@ page language=&quo ...
- C++实现按1的个数排序
题目内容:有一些0.1字符串,将其按1的个数的多少的顺序进行输出. 输入描述:本题只有一组测试数据.输入数据由若干数字组成,它是由若干个0和1组成的数字. 输出描述:对所有输入的数据,按1的个数进行生 ...
- 记安装ubuntu server和一些程序
1. 安装ubuntu server 按照流程走了一遍,一切画面都正常,就是重启后界面只有一个光标闪啊闪,我不知道应该再装一遍还是找老大来解决,想了下,以前电脑就是因为出错才重装的,现在这个情况有可能 ...