关于z-index的使用注意事项

注：在前端开发中我们经常遇到使用z-index的情况，同时，开发页面的特效实现中，定位，布局展示。都是很重要，在以前的开发中我一直没有注意到z-index的使用其实是受到限制的。

大部分开发环境中或者demo中，模块的布局都是包含float、position等关于定位的问题的。这是为了实现页面的展示效果。例如出现连个模块的堆叠或者两个模块的隐藏替换（这里的举例是关于tab标签页的）
在今天的demo书写中我发现了如下的原理也很简单，就是利用了z-index的覆盖问题，在写demo的过程中我发现无论怎么改变，z-index总是无效的，于是百度了一下z-index无效的情况，一共有三种：

1. 父标签 position属性为relative.

2. 问题标签无position属性（不包括static）.

3. 问题标签含有浮动(float)属性。

这样也很好理解为什么parent设置了position和z-index之后insert的z-index就会失效的问题了，他的解决办法有是三个

1. position:relative改为position:absolute.

2. 浮动元素添加position属性（如relative，absolute等）.

3. 去除浮动。
   关于清除浮动的做法：

      .clearfloat:after{
          display:block;
          clear:both;
          content:"";
          visibility:hidden;
          height:0;
   
     }
   

使用伪类 实现操作