z-index part1

](http://upload-images.jianshu.io/upload_images/4168720-816e86b9d93ea96e.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

• 如果定位元素没有发生嵌套

1. 后来居上的准则；
2. 哪个大哪个上

• 如果定位元素发生嵌套

1. 祖先优先原则 （前提： z-index 不是auto）

   
   
   

   Paste_Image.png

层叠上下文和层叠水平

• 页面根元素天生具有层叠上下文（stacking context）

• z-index值为数值的定位元素也具有层叠上下文

• 层叠上下文中的每个元素都有一个层叠水平（stacking level）， 决定了同一个层叠上下文中元素在z轴的显示顺序

• 层叠水平和z-index不是同一个东西， 普通元素也有层叠水平

• 层叠上下文可以嵌套， 组合成一个分层次的层叠上下文。
• 每个层叠上下文和兄弟元素独立： 当进行层叠变化或渲染的时候，只需要考虑后代元素。
• 每个层叠上下文是自成体系的： 当元素的内容被层叠后，整个元素被认为是在覆层的层叠顺序中

层叠顺序

Paste_Image.png

Paste_Image.png

Paste_Image.png

背景色覆盖是层叠顺序block< inline-block，文字覆盖是后来居上 （文字是inline， 跟inline-block是同一个层叠水平）

Paste_Image.png

层叠上下文

• 定位元素默认z-index: auto， 可以看成z-index:0
  元素有了定位，就会覆盖其他元素，就是因为z-index: auto比 inline-block更高
• z-index不为auto的定位元素会创建层叠上下文；

   ![](img.png)

此时图片和box 属于同一个层叠上下文 （根元素）， 所以图片在背景之上， 于是如果给图片加上z-index:-1，它就到box下面了。

Paste_Image.png

Paste_Image.png

但是当box 加上z-index:0的时候，它就创建了层叠上下文，box就变成了zindex的容器，于是就又是img和background相比了，所以图片在上

Paste_Image.png

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

Paste_Image.png