z-index基础学习笔记

z-index基础
    z-index属性指定了元素及其子元素的[z顺序]，而[z顺序]可以决定当元素发生覆盖的时候，哪个
    元素在上面。通常一个较大z-index值的元素会覆盖较低的那一个。
    
    z-index的属性值：
    z-index:auto; 默认值
    z-index:<integer>;整数值
    z-index:inherit; 继承
    -------------------------
    z-index基本特性：
    1.支持负值；eg: z-index:-1;
    2.支持CSS3 animation动画；
    eg： @keyframes zIndex {
        0% {z-index: -1;}
        100% {z-index: 51;}
    }
    3.在CSS2.1时代，需要和定位元素配合使用。
    注意：如果不考虑CSS3,只有定位元素(position:relative/absolute/fixed/sticky)
    的z-index才有作用！在CSS3中有例外......
    ----------------------------
    z-index只对定位元素有作用。
    eg:{position: relative; z-index: 2;}
    {position: absolute; z-index: 2;}
    {position: fixed; z-index: 2;}
    {position: sticky; z-index: 2;}
    如果定位元素z-index没有发生嵌套:
     1.后来居上的原则；
     eg:<img src="one.jpg" style="position:absolute;">
        <img src="one.jpg" style="position:relative;">  
     2.哪个大，哪个上；
     eg:<img src="one.jpg" style="position:absolute; z-index:2;">
        <img src="one.jpg" style="position:relative; z-index:1;">
     如果定位元素z-index发生嵌套:
       1.祖先优先原则；
       注意：前提：z-index值是数值，非auto！
    -------------------------------------------
    层叠上下文(stacking context)
    它是HTML元素中的一个三维概念，表示元素在Z轴上有了“可以高人一等”。
    哪些元素具有层叠上下文呢？
     1.页面的根元素天生具有层叠上下文，称之为“根层叠上下文”。
     2.z-index值为数值的定位元素也具有层叠上下文。
     3.其它属性...
     层叠水平(stacking level)
     层叠上下文中的每个元素都有一个层叠水平(stacking level),
     决定了同一个层叠上下文中元素在Z轴上的显示顺序。
     遵循“后来居上”和“谁大谁上”的层叠准则。
     注意：层叠水平(stacking level)和z-index不是一个东西。普通元素也有层叠水平。
     
     层叠上下文的几个特性：
     1.层叠上下文可以嵌套，组合成一个分层次的层叠上下文。
     2.每个层叠上下文和兄弟元素独立：当进行层叠变化和渲染的时候，只需要考虑后代元素。
     3.每个层叠上下文是自成体系的：当元素的内容被层叠后，整个元素被认为是在父层的层叠顺序中。
     
     层叠顺序(stacking order)
     它表示元素在发生层叠时候有着特定的垂直显示顺序。
     
     著名的7阶层叠顺序（stacking level）
     由低到高的层叠顺序（stacking order）：
     层叠上下文（backgroud/border）->负z-index->block块状水平盒子->float浮云盒子
     ->inline/inline-block水平盒子->z-index:auto或看z-index:0，不依赖z-index的层叠上下文->正z-index。
     ----------------
     1.定位元素默认z-index:auto;可以看成是z-index:0;
     2.z-index不为auto的定位元素会创建层叠上下文；
     3.z-index层叠顺序的比较止步于父级层叠上下文；
       
    =======================================