.pr{position:relative;}
.pa{position:absolute;}
div{width:200px;height:200px;border:1px solid #ccc;color:#fff;font:bold 14px \5fae\8f6f\96c5\9ed1;}
#one{background:#39f;}
#one .pa1{background:#096;top:25px;left:20px;}
#one .pa2{background:#969;top:90px;left:40px;}
#two{background:#669;top:165px;left:70px;}
定位后依照元素在文档中的先后位置，后出现的会在上面。
为#one加上z-index:1;#one .pa1加上z-index:30;#one .pa2加上z-index:20;#two加上z-index:9;
.pr{position:relative;}
.pa{position:absolute;}
div{width:200px;height:200px;border:1px solid #ccc;color:#fff;font:bold 14px \5fae\8f6f\96c5\9ed1;}
#one{background:#39f; z-index:1;}
#one .pa1{background:#096;top:25px;left:20px; z-index:30;}
#one .pa2{background:#969;top:90px;left:40px; z-index:20;}
#two{background:#669;top:165px;left:70px; z-index:9;}
因为父辈同级元素的z-index值#one<#two，所以#one决定了其子元素.pa1和.pa2的z-index值不论有多大都会被#two所覆盖；作为同级兄弟元素的.pa1和.pa2则比较其z-index值，较大的.pa1显示在上面。
为#one .pa1加上z-index:10;#two加上z-index:1;
.pr{position:relative;}
.pa{position:absolute;}
div{width:200px;height:200px;border:1px solid #ccc;color:#fff;font:bold 14px \5fae\8f6f\96c5\9ed1;}
#one{background:#39f;}
#one .pa1{background:#096;top:25px;left:20px; z-index:10;}
#one .pa2{background:#969;top:90px;left:40px;}
#two{background:#669;top:165px;left:70px;z-index:1;}
Firefox/Chrome等现代浏览器（包括ie8+）下，父元素#one未设置z-index值，则默认为auto，此时的#one .pa1为自由的定位元素，因此z-index较大的#one .pa1显示在较小的#two上面。如果把#two的z-index值去掉，情况也会是一样的，设置了较大z-index值的#one .pa1会显示在未设置z-index的元素上面。
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遮挡。
普通元素的堆叠顺序由元素在文档中的先后位置决定，后出现的会在上面，请小心计算好浮动和负边距布局，注意窗口元素的特殊性；非同级关系和非父子关系定位元素之间的堆叠顺序，要向上追溯到其为兄弟关系的父元素上，先比较其z-index值，只有父辈元素中的z-index值较大的后代子元素才能超过z-index值较小的父辈元素及其子孙元素。
为了在编码时就减少z-index值判断的复杂性，我建议对于一般页面内容类定位元素的z-index设置小于99的值（如非必要不使用负值），广告类定位元素的z-index设置100～500的值，公告提示等弹出类定位元素的z-index设置大于500的值；对于比较复杂定位嵌套页面，为了避免ie6/7的显示差异，请为父辈类定位元素显性加上z-index:0或其他值。
该小贴士来自自 iMind 在博客园的技术文章，刚子编辑整理，欢迎在底部的评论框参与讨论交流学习。
" />
