前面的话
对于所有定位，最后都不免遇到两个元素试图放在同一位置上的情况。显然，其中一个必须盖住另一个。但，如何控制哪个元素放在上层，这就引入了属性z-index
定义
利用z-index，可以改变元素相互覆盖的顺序。这个属性的名字由坐标系统得来，其中从左向右是x轴，从上到下是y轴。从屏幕到用户是z轴。在这个坐标系中，较高z-index值的元素比较低z-index值的元素离用户更近，这会导致较高z-index值的元素覆盖其他元素，这也称为堆叠或叠放
z-index
值: | auto | inherit
初始值: auto
应用于: 定位元素
继承性: 无
[注意]z-index应用于定位元素是CSS2的规范，到了CSS3标准，z-index的应用范围扩大了不少
[注意]所有整数都可以作为z-index的值，包括负数。如果为元素指定一个负z-index值，会将其移到离读者更远的位置，会移到叠放栈的更低层
堆叠规则
对于CSS2.1来说，页面元素的堆叠规则如下图所示:
定位元素的堆叠规则
[1]对于定位元素(position不是static的元素)来说，不设置z-index或z-index相同时，后面元素覆盖前面元素
[2]对于处于同一堆叠上下文中的同一层次的元素来说，默认z-index较大值覆盖z-index较小值
堆叠上下文
一旦为一个元素指定了z-index值(不是auto)，该元素会建立自己的局部堆叠上下文。这意味着，元素的所有后代相对于该祖先元素都有其自己的叠放顺序
[注意]auto值指当前堆叠上下文中生成的栈层次与其父框的层次相同，这个框不会建立新的局部叠放上下文。z-index:auto与z-index:0的值相等，但z-index:0会建立新的局部堆叠上下文
默认样式
1 2 3 4 5 6
查看更多关于深入理解CSS定位中的堆叠z-index_html/css_WEB-ITnose的详细内容...
声明：本文来自网络，不代表【好得很程序员自学网】立场，转载请注明出处：http://www.haodehen.cn/did111496