CSS_中的z-index(四)总结
?
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剖析》
?
另外,老外写的文章真是太好了。难能可贵的是,老外总是喜欢花时间来好好的写文章,看看他们的认真程度。这篇-->>
而国人为了生存可能很私利而不愿意分享;也很有可能被老板逼的忙死忙活,没时间写。
?
?
?
?