?
CSS z-index 总结
?
既然是总结，默认已经熟悉并领会前面几篇文章的内容。
?
大道至简：
?
1. 页面嵌套产生父子层叠关系，犹如一棵树（倒置），有父亲层，有兄弟层，有孩子层
?
2. z-index控制页面z轴排列的上下顺序为：孩子层必须位于父亲层的排列范围内，依次递归
??? 解释：A B C为兄弟
???????????? A孩子有A1 A2 A3； B孩子有B1 B2 B3；C也如此
???????????? 如果要看A1 A2 A3 B1 B2 ...C3 的z轴排列上下顺序，必须先排列其父亲的位置
???????????? 如果A{z-index:10} B{z-index:20} C{z-index:30}，那么父亲层已经在上层决定了孩子层的顺序；此时即使A2{z-index:100} B2{z-index:1}，A2也要排在B2下面，因为A2之父亲层排在了B2之父亲曾的下面。
?
3. 父子层叠关系与页面上的层叠关系一样吗？否！
??? 解释：页面层叠关系给CSS层叠关系提供了条件，但CSS的父子层叠关系，还需要看CSS上的布局设置
<style type="text/css">
#container { position: relative;}
#box1 { position: absolute; top: 100px; left: 210px; width: 200px; height: 200px; background-color: yellow; z-index: 60; }
#box2 { position: absolute; top: 50px; left: 160px; width: 200px; height: 200px; background-color: green; z-index: 40; }
</style>
<div id="container">
<div id="box1">Box1</div>
</div>
<div id="box2">Box2</div>
?页面层叠父子关系一眼看出，但其CSS父子关系却不相同：
container由于CSS中没有设置z-index值，其默认为auto，那么其并不产生stack-context，因此其不是页面子元素box1的父亲CSS；
这样的结果使得，box1 和 box2成为兄弟CSS；
?
4. 另外一些底层知识：见前几篇文章
《元素层叠级别（stack level）及z-index剖析》
?
另外，老外写的文章真是太好了。难能可贵的是，老外总是喜欢花时间来好好的写文章，看看他们的认真程度。这篇-->>
而国人为了生存可能很私利而不愿意分享；也很有可能被老板逼的忙死忙活，没时间写。
?
?
?
?