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剖析》

 

另外，老外写的文章真是太好了。难能可贵的是，老外总是喜欢花时间来好好的写文章，看看他们的认真程度。这篇-->>

而国人为了生存可能很私利而不愿意分享；也很有可能被老板逼的忙死忙活，没时间写。