css笔记 - 张鑫旭css课程笔记之 z-index 篇

时间:2022-11-07 15:10:22

一、z-index语法、支持的属性值等

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的情况下:

如果 都没有设置 z-index层级,那么后边的元素覆盖前边的元素。即后来居上
如果z-index设置了 具体数值,那么数值大的覆盖数值小的。即谁大谁上
比如:a元素的z-index为2;b元素的z-index为1;b虽然在a后边,但是a覆盖b;

2. 定位元素的嵌套父元素设置了z-index的情况下:

a). 父元素z-index都设置具体数值时:
如果父元素有大有小,遵循 祖先优先原则,谁的父亲的z-index值大,谁在上边。
如果父元素一般大,那么遵循后来居上,谁的dom位置靠后谁的层级在上边。
比如:a元素的z-index为2;b元素的z-index为1;
因为b在a后边,即使a和b的父元素z-index都为1。b的父元素也比a的父元素高。
同样如果a的父元素为2,b的父元素为1,那么即使b在a后边,a的父元素也比b的父元素高。 
 
b). 父元素z-index都设置auto时:
父元素和没设置一样,没有祖先优先原则,还是遵循类似普通元素的那两条,后来居上和谁大谁上
c).其中一个为auto,另一个为具体数值时:
c-1). ie8及现代浏览器 的表现是,为auto的父元素z-index值不起作用,其 子元素的z-index值和不为auto的另一个父元素比较 层级,谁大谁上
还是比如a和b,a的z-index值为3,父元素z-index值为auto。
b和其父元素的z-index值都为1,即使b在a后边,即使a的父元素z-index:auto;比b的父元素小,
但是a的z-index值比b的父元素还大,所以a在上边。
 
原因z-index:auto;生成盒子层叠水平是0,盒子不会创建一个新的层叠上下文(ie8及现代浏览器)。
回归案例,也就是说当a的父元素z-index为auto时,根本没有生成层叠上下文,父元素根本没有出来应战,只能子元素硬着头皮和别人的爹pk。
不过还是自古英雄出少年,只要子元素的z-index值大,管他是谁的父元素都能打赢。
c-2).ie6、7 中,因为z-index:auto也会触发层叠上下文,所以也遵循后来居上原则。
 

三、z-index与层叠上下文

定位元素默认z-index:auto可以看成是z-index:0;(从层叠顺序的角度)
z-index不为auto的定位元素会创建层叠上下文。(从层叠上下文的角度,此时auto不等于0)
z-index层叠顺序的比较止步于父级层叠上下文。
 

z-index新建层叠上下文

当z-index为数值的时候,就会新建层叠上下文。
 
三条原则:
 在所有浏览器中,只要z-index为数值,就会创建层叠上下文。
 当z-index为auto时,不会触发新建层叠上下文。z-index:auto;相当于z-index:0;的效果。(ie6、7除外:ie6、7中就算z-index为auto,也会创建层叠上下文。)
 在ie6、7中,只要有z-index就会创建层叠上下文。(这是一个bug)
 
 

四、层叠上下文和层叠水平

1. 层叠上下文(stacking context)

 即,在z轴上被提升(或降低)了层级的元素。
 他是html元素中的一个三维概念,表示元素在z轴上的层级。
a). 在html里边,具有层叠上下文的元素有:
 1. 页面的额根元素天生自带层叠上下文。被称为“根层叠上下文”
 2. 设置了z-index:任意数值;的定位元素也具有层叠上下文。
 3. 其他 
  • 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。
  
b). 层叠上下文的几个特性:
1. 层叠上下文可以嵌套,组合成一个分层次的层叠上下文。
2. 每个层叠上下文和兄弟元素独立,当进行层叠变化或渲染的时候,只需要考虑后代元素。(想象一个人当官,全家升天。子孙得福。但是当官的兄弟不一定得到好处)
3. 每个层叠上下文是自成体系的:当元素的内容被层叠后,整个元素被认为是在父层的层叠顺序中。(就像两个父元素大官比较层级大小,跟子元素的层级大小没有关系。子元素的层级再大,父元素层级小就比不过父元素层级大的。)

2. 层叠水平(stacking level)

 层叠上下文中的每个元素都有一个层叠水平,层叠水平决定了同一个层叠上下文中,元素在z轴上的显示循序,遮盖原则。就像事同一个元素中,几个具有层叠次序的子元素之间的排列规则:
具体原则是:
 后来居上: 层叠水平一致时,dom结构在后边的覆盖前边的。
 谁大谁上: 层叠水平不一致时,谁的层叠水平值大谁在上边(就是比较z-index的数值谁大)
 

3. 普通元素也有层叠水平

7阶层叠水平(stacking level)

  1.层叠上下文 background/border(根元素或者z-index值不为auto的定位元素) 
    2.负z-index  
      3.block块状水平盒子   
        4.float浮动盒子   
          5.inline/inline-block水平盒子(内联和inline-block平级) 
            6.z-index:auto或当成z-index:0   
              7.正z-index   
 
inline/inline-block元素竟然可以覆盖浮动元素。原因如下
1属于背景装饰类
3、4属于盒子布局类:块状盒子和float经常用于布局
5 则是主要内容类:inline和inline-block用于内容表达
内容是页面中最重要的实体。因此,层叠水平要高。

五、其他需要注意的:

1. 不支持z-index的层叠上下文元素的层叠顺序均是z-index:auto级别(就是上边9条中,不需要z-index也能产生层叠上下文的情况)
2. 依赖z-index的层叠上下文元素的层叠顺序取决于z-index值。

六、两种通过z-index创建层叠上下文的情况:

1. position值为relative、absolute、fixed(部分浏览器)
2. display:flex|inline-flex容器的子flex项。

2018-09-05  13:48:54

css笔记 - 张鑫旭css课程笔记之 z-index 篇的更多相关文章

  1. css笔记 - 张鑫旭css课程笔记之 float 篇

    https://www.imooc.com/t/197450float float的设计初衷/原本作用-是为了实现文字环绕效果如,一个图片和一段文字垂直放置,给图片加上浮动,文字就环绕图片展示了. 浮 ...

  2. css笔记 - 张鑫旭css课程笔记之 vertical-align 篇

    支持负值的属性: margin letter-spacing word-spacing vertical-align 元素vertical-align垂直对齐的位置与前后元素都没有关系元素vertic ...

  3. css笔记 - 张鑫旭css课程笔记之 overflow 篇

    overflow基本属性值 visible(默认值):超出依然显示 hidden :超出隐藏 scroll :超出,滚动显示.子元素不超出也会有滚动条的那条轨道. auto:如果超出,滚动显示.如果不 ...

  4. css笔记 - 张鑫旭css课程笔记之 line-height 篇

    一.line-height line-height: 指两行文字基线之间的距离. 行高200px表示两行文字基线之间的距离是200px: 二.基线:baseline 字母x下边缘的位置 基线是任意线定 ...

  5. css笔记 - 张鑫旭css课程笔记之 padding 篇

    [padding地址](https://www.imooc.com/learn/710) 一.padding与容器尺寸之间的关系 padding会影响元素的尺寸(通常情况下是通过增加/挤压内容区域) ...

  6. css笔记 - 张鑫旭css课程笔记之 margin 篇

    margin - 人若犯我,我必犯人! [margin地址](https://www.imooc.com/learn/680) 一.margin与容器尺寸的关系 relative可定位,但是不改变容器 ...

  7. css笔记 - 张鑫旭css课程笔记之 relative 篇

    relative地址 relative 对 absolute的限制作用 限制left/top/right/bottom(方位值)定位 限制描述:absolute设置了方位值时,这些方位值是相对于pos ...

  8. css笔记 - 张鑫旭css课程笔记之 absolute 篇

    absolute地址 absolute绝对定位 绝对定位与浮动鲜为人知的兄弟关系 即是说,absolute后,元素和浮动元素的特性差不多,只不过absolute脱离文档流,元素飘在天上,float还在 ...

  9. css笔记 - 张鑫旭css课程笔记之 border 篇

    border地址 border特性: 能形成BFC但是不能清除浮动.但是bfc也是把子元素的margin包裹进来,但是拿自己的margin穿透没办法的. 边框宽度不支持百分比 透明border可以突破 ...

随机推荐

  1. http://www.cnblogs.com/youring2/archive/2011/03/28/1997694.html

    http://www.cnblogs.com/youring2/archive/2011/03/28/1997694.html

  2. Mac 下 Intellij IDEA 2016.1.2+maven+jetty+ JRebel 6.4.3 破解+spring mvc

    准备阶段:  Intellij IDEA 2016.1.2 (官方下载,作者下载的是社区版): JRebel for IntelliJ插件安装,可选择在线安装,在线安装的是最新版,我选择本地安装, 下 ...

  3. Android 手机卫士14--Widget窗口小部件AppWidgetProvider

    1.AndroidManifest.xml根据窗体小部件广播接受者关键字android.appwidget.action.APPWIDGET_UPDATE 搜索android:resource=&qu ...

  4. winform 通过 html 与swf 交互 简单案例

    在上一篇 winform 与 html 交互 简单案例 中讲了winform与html之间的简单交互,接下来的内容是在winform中以html为中转站,实现将swf嵌入winform中并实现交互. ...

  5. windows下搭建PHP环境

    1.Apache 下载地址:http://httpd.apache.org/download.cgi 下载之后进入CMD,/Apache/bin/httpd.exe -k install 进行安装 提 ...

  6. Day56

    今天干啦啥呢 早上七点起来 天气冷了真起不来啊 再坚持坚持就好了 今天上午九点开始考数据库 我去 大学四年第一次感觉到这样的爽  作弊的爽啊 也没有完全的作弊啦 是开卷考试,反正做的很顺利了. 我和胡 ...

  7. (转)ikvmc的使用

    IKVM.NET是一个针对Mono和微软.net框架的java实现,其设计目的是在.NET平台上运行java程序.本文将比较详细的介绍这个工具的原理.使用入门(如何java应用转换为.NET应用.), ...

  8. Struts2大约Action系统培训6大约action的接受三个参数的方法

    我们知道,action在web它在控制器的发展起到了一定作用,通过接收client来到参数,运行不同的模块只实现运营,因此,接收参数是非常重要的组成部分,有接收到的参数的仅前端.操作权限运行数据库后端 ...

  9. 利用Needleman–Wunsch算法进行DNA序列全局比对

    生物信息学原理作业第二弹:利用Needleman–Wunsch算法进行DNA序列全局比对. 具体原理:https://en.wikipedia.org/wiki/Needleman%E2%80%93W ...

  10. 关机充电如何实现短按pwrkey灭屏

    目前关机充电PWRKEY实现长按开机和短按亮屏功能,灭屏是根据BL_SWITCH_TIMEOUTS时间,自动灭屏的:如果需要实现PWRKEY主动灭屏,请按照如下方法修改:     alps/media ...