层层叠叠，用好z-index

虽然一直在用z-index，但是总会有一些重叠的错误，觉得还是对z-index理解太模糊了，于是决定整理一下吧。

先来整理整理文档流知识

html中的所有元素默认都处于普通流中，按照先后顺序出现，如果不指定负的边距就不会出现重叠。

如果我们在css中为元素设置了浮动（float）或定位（position）后，就会发生改变。

1、设置float

        通过设置float元素就会脱离文档流，无论是向左还是向右。

2、设置position:absolute;

        元素会根据祖先元素进行定位，会脱离文档流。

3、设置position:fixed;

        元素会相对于浏览器窗口进行偏移，并且固定在一个位置。也会脱离文档流。

4、设置position:relative;

        在普通流中偏移，保留其空间。

值得一提的是，设置前三种会让元素成为块级元素。

先说用float出现的重叠问题

        使用float出现重叠按照元素在文档流中的先后位置决定，后出现的在上面。

        当然在设置浮动后，浮动的元素会遮盖住文档中的元素。

使用position出现的重叠问题

        当为元素设置position值为relative/absolute/fixed后，z-index属性被激活。如果把显示出的图案比作为一个二维平面，拥有x轴和y轴，并利用x轴y轴展示内容，那z-index就是再给它加上一个z轴。当然这个元素必须是有定位的。

        茫茫人海，如果找不到自己的定位，那怎那么能来去自由？

        而且，z-index的大小只决定同一父元素中的同级子元素的堆叠顺序。如果父元素有z-index的值，就为子元素定义了堆叠了顺序。也就是说如果你的爸爸等级高，你的初始等级也会高，正儿八斤要靠爹。

        如果之上的父元素没有z-index值，那么这个子元素的z-index则视它为自由的，它可以与父元素的同级兄弟定位元素或其他自由的定位元素来比较z-index的值，决定它的堆叠顺序。正所谓英雄不问出路就是如此~

        如果同级的z-index值相同，则堆叠顺序由元素在文档中的先后位置决定，后出现的会在上面。

        总之，一般出错主要是有时候你设置一个较大的z-index反而在较小的z-index下面，看看它的父元素是不是也设置了z-index。还有就是z-index设置为负的可能会导致它被body覆盖掉，从而影响点击事件。

对于z-index的理解就这些了，整理一下都是遇到过的问题。其实问题并不难，但是理清思路很重要~