z-index：默认值auto

案例：

z-inde:auto不会创建层叠上下文，z-index:0会创建层叠上下文

z-inde:auto不会创建层叠上下文，z-index:0会创建层叠上下文

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

不为z-index不为auto的定位元素会层叠上下文

顺序比较止步于父级层叠上下文

1. 定位元素默认z-index：auto可以看成z-index：0

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

3. z-index层叠顺序的比较止步于父级层叠上下文（若元素父级设置了层级，以父级的层叠大小为准）

   从层叠顺序上讲，z-index：auto可以看成z-index：0

   但从层叠上下文来讲，z-index：auto不会创建层叠上下文，z-index：0会创建层叠上下文
   

.box设置z-index时，会创建层叠上下文，图片的层叠上下文元素就变成了容器

定位元素之所以在上方是因为z-index：auto的优先级大于inline元素

1、定位元素默认z-index：auto可以看成是z-index：0

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

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

定位之后是 auto；当定位元素的 z-index 不是 auto 的时候就会创建层叠上下文

position: relative; 相对定位使 z-index: 0, img 是内联元素，根据层叠顺序表，img在下面

z-index 层叠上下文 三个要点

相对定位时默认 z-index：auto

z-index:auto的层叠顺序大于内联元素

层叠上下文auto与0

z-index之间的关系

z-index与层叠上下文

1、定位元素默认z-index：auto；可以看成是z-index：0；

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

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

4、一旦容器z-index值为数值，图片的层叠上下文元素变为容器

5、从层叠顺序上讲，z-index:auto可以看成z-index:0，但是从层叠上下文来讲，两者存在本质差异

6、z-index受限于层叠上下文

z-index:auto 类似于z-index:0; 但z-index不会创建层叠上下文

代码结构：

三种情况，默认值

定位元素默认是z-index:auto

z-index: 0 会创建层叠上下文

z-index:auto 不会创建层叠上下文（ie7除外）

z-index 受限于层叠上下文

定位元素默认z-index：auto可以看成是z-index：0；

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

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

从层叠顺序上讲，z-index:auto可以看成z-index:0，但是从层叠上下文来讲，两者却有着本质差异。

从层叠顺序上z-index：aotu和z-index：0；

但是从层叠上下文来讲，两者有着明显的差别：z-index：auto

不会创建层叠上下文，但是z-index：0可以创建。

层叠顺序是一个覆盖的过程：依照一定的顺序来覆盖，规则如下：

background-color或者是border + z-index负数 + float + block +inline、inline-block + z-inde：0或者auto+z-index正数

.box{
background-color:#000;
position:absulute;
z-index:0;//开始创建层叠上下，background-color的层叠的样式比z-inde为负数的要高一些。
}
img{
position:reletion;
z-index:-1;
}

定位元素的默认z-index：auto可以看成是z-index：0

z-index不为auto的定位元素可以创建层叠上下文；

z-index的层叠止于父级的层叠上下文

一旦容器z-index值为数值，图片的层叠上下文元素就变成了容器！

z-index要点

这张图更好~

负值创建的层叠上下文

负值的z-index和层叠上下文

为何定位元素会覆盖普通元素？