元素重叠和z-index属性问题

元素重叠

当为元素设置position值为relative/absolute/fixed后，元素发生的偏移可能产生重叠，且z-index属性会被激活。z-index值可以控制定位元素在垂直于显示屏方向（Z 轴）上的堆叠顺序（stack order），值大的元素发生重叠时会在值小的元素上面。
记录一下有帮助的两个博文。
浅析CSS——元素重叠及position定位的z-index顺序
css元素的堆叠顺序（z-index堆叠上下文(stack contex)）

在这里摘取部分原文。

---

z-index属性

前提：z-index只能在position属性值为relative或absolute或fixed的元素上有效（被激活）。

基本原理：z-index值可以控制定位元素在垂直于显示屏方向（Z 轴）上的堆叠顺序（stack order），值大的元素发生重叠时会在值小的元素上面。

使用相对性：z-index值只决定同一父元素中的同级子元素的堆叠顺序（同一父元素的同级子元素的堆叠顺序就是通过其自身的z-index属性值确定的）。父元素的z-index值（如果有）为子元素定义了堆叠顺序（css版堆叠“拼爹”）。
向上追溯找不到含有z-index值的父元素的情况下，则可以视为自由的z-index元素，它可以与父元素的同级兄弟定位元素或其他自由的定位元素来比较z-index的值，决定其堆叠顺序。同级元素的z-index值如果相同，则堆叠顺序由元素在文档中的先后位置决定，后出现的会在上面。所以如果当你发现一个z-index值较大的元素被值较小的元素遮挡了，请先检查它们之间的dom结点关系，多半是因为其父结点含有激活并设置了z-index值的position定位元素。（当不同父元素下的元素进行堆叠顺序比较时，当父元素和元素自身都设置了z-index值时，元素的堆叠顺序会按照父元素的z-index值作为标准进行比较，当然这个父元素也必须是position属性值为relative或absolute或fixed的元素；而如果没有设置了z-index值的父元素时，元素堆叠顺序则会根据自身设置的z-index值作为标准进行比较。）

还要注意：position为static的元素是处在默认的堆叠上下文中，（忽略top left right bottom z-index ）。而position为relative或absolute或fixed的元素处在z-index为auto（当没有设置z-index的属性值的时候其默认值为auto）的堆叠上下文中。所以，如果relative的元素和static的元素重叠的话，relative的元素在上面。
即z-index为auto的堆叠上下文中 > 默认的堆叠上下文

ie6、7兼容性试验：元素#one和#two同级，#one未设置z-index值，#two加上z-index:1，#one .pa1是#one元素的子元素，为#one .pa1加上z-index:10。情况如下：

1. Firefox/Chrome等现代浏览器（包括ie8+）下，父元素#one未设置z-index值，则默认为auto，此时的#one .pa1为自由的定位元素，因此z-index较大的#one .pa1显示在较小的#two上面。如果把#two的z-index值去掉，情况也会是一样的，设置了较大z-index值的#one .pa1会显示在未设置z-index的元素上面。

2. ie6/7下,差异在于#one .pa1显示在了#two的下面。因为对于ie6/7父元素#one未设置z-index值，会被隐含地设置为z-index:0;此时z-index值#one的0要与#two的1比较，而#two比较大，所以#one的子元素无论z-index如何的大也会被#two遮挡。如果把#two的z-index值去掉，情况依旧，因为未设置z-index值的#one和#two都会被默认加上z-index:0;有了值就可以比较，值相同的情况下堆叠顺序由元素在文档中的先后位置决定，出现在后面的#two会在上面,结果#one的子元素无论z-index如何的大还是会被#two遮挡。

一些具体的例子可见下图：

1、没有设置z-index属性值时

2、父辈同级元素的z-index值#one<#two，所以#one决定了其子元素.pa1和.pa2的z-index值不论有多大都会被#two所覆盖；作为同级兄弟元素的.pa1和.pa2则比较其z-index值，较大的.pa1显示在上面

3、ie6、7兼容性试验：在父元素没有设置z-index属性值时，由于默认值的不同带来的结果差异。Firefox/Chrome等现代浏览器（包括ie8+）下，父元素#one未设置z-index值，则默认为auto，此时的#one .pa1为自由的定位元素；ie6/7父元素#one未设置z-index值，会被隐含地设置为z-index:0。

4、#1，#3是同级元素，#2是#1的子元素，#4是#3的子元素，不同父元素的#2和#4在设置不同z-index属性值情况下的比较。

5、#2元素的父元素未设置z-index，#4的父元素设置了z-index值的情况

6、#2和#4元素的父元素都设置了z-index值的情况，但#1的z-index比#3的z-index值更小

---

简单总结及建议

1. 普通元素的堆叠顺序由元素在文档中的先后位置决定，后出现的会在上面，请小心计算好浮动和负边距布局，注意窗口元素的特殊性；
2. 非同级关系和非父子关系定位元素之间的堆叠顺序，要向上追溯到其为兄弟关系的父元素上，先比较其z-index值，只有父辈元素中的z-index值较大的后代子元素才能超过z-index值较小的父辈元素及其子孙元素；
3. 为了在编码时就减少z-index值判断的复杂性，我建议对于一般页面内容类定位元素的z-index设置小于99的值（如非必要不使用负值），广告类定位元素的z-index设置100～500的值，公告提示等弹出类定位元素的z-index设置大于500的值；
4. 对于比较复杂定位嵌套页面，为了避免ie6/7的显示差异，请为父辈类定位元素显性加上z-index:0或其他值。