首页 > 代码库 > z-index深入理解

z-index深入理解

【CSS深入理解之z-index】听课总结

(http://www.imooc.com/learn/643) 

一、z-index基础知识

1.z-index的含义

 z-index属性指定了元素及其子元素的【z顺序】,而【z顺序】可以决定当元素发生覆盖的时候,哪个元素在上面。通常一个较大的z-index值的元素会覆盖较低的那一个。

2.属性值

 z-index:auto; 默认值

 z-index:<integer>;整数值

   z-index:inherit; 继承

3.基本特性

  1>支持负值;

  2>支持CSS3 animation动画;(并没什么实用应用场景)

  3>在CSS2.1时代,需要和定位元素配合使用

    如果不考虑CSS3,只有定位元素(position:relative/absolute/fixed/sticky)的z-index才有作用!在CSS3中有例外

二、z-index与定位元素

  z-index只对定位元素有作用。要设置非static的定位属性,z-index才会生效。

  如果定位元素z-index没有发生嵌套(并列的):

    1>后来者居上的准则;

    技术分享技术分享

    2>哪个大哪个上

      技术分享

  如果定位元素z-index发生嵌套:

    1>祖先优先原则

    前提:z-index是数值,不是auto

    技术分享

              祖先后来者居上

    技术分享

   CSS2.1:(z-index:auto)当前层叠上下文生成盒子层叠水平是0。盒子(除非是根元素)不会创建一个新的层叠上下文。

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

  1.层叠上下文(stacking context)

  层叠上下文是HTML元素中的一个三维概念,表示元素在z轴上有了“可以高人一等”。

  栗子:  皇帝(你)    当官(层叠上下文)   家族(嵌套)

  · 层叠上下文表示普通老百姓HTML元素当官了,离皇帝更近了。

  · 页面根元素天生具有层叠上下文,称之为“根层叠上下文” -(皇亲国戚)

  · z-index值为数值的定位元素也具有层叠上下文。 -(科考入选)

  · 其他属性...... -其他当官途径

  2.层叠水平(stacking level)

  层叠上下文中的每个元素都有一个层叠水平,决定了同一个层叠上下文中元素在z轴上的显示顺序。

  遵循“后来居上”和“谁大谁上”的层叠准则

  层叠水平和z-index不是一个东西。普通元素也有层叠水平。z-index只在定位元素上起作用。

  3.层叠上下文的几个特性:

  1>层叠上下文可以嵌套,组合成一个分层次的层叠上下文。

  2>每个层叠上下文和兄弟元素独立:当进行层叠变化或渲染的时候,只需要考虑后代元素。

  3>每个层叠上下文是自称体系的:当元素的内容被层叠后,整个元素被认为是在父层的层叠顺序中。

四、元素的层叠顺序 stacking order

  层叠顺序:元素发生层叠时候有着特定的垂直显示顺序

  意义:规范元素重叠时候的呈现规则。

  著名的7阶层叠水平(stacking level)

  这样的层叠顺序更符合页面加载的功能和视觉呈现的。内容是页面最重要是实体,因此层叠水平要高。

  技术分享

 

技术分享

文字是内联水平display:inline.

上图中的层叠顺序:1>inline-block大于block  

         2> 文字和inline-block方块的层叠水平一样。如果元素的层叠水平一样,没有别的因素干扰,则遵循后来者居上原则。

五、z-index与层叠上下文

  1.行为要点:

  1>定位元素默认z-index:auto可以看成是z-index:0;

  2>z-index不为auto的定位元素会创建层叠上下文;

  3>z-index层叠顺序的比较止步于父级层叠上下文;

z-index深入理解