叠加的五条叠加法则

《叠加的五条叠加法则》由会员分享，可在线阅读，更多相关《叠加的五条叠加法则（23页珍藏版）》请在装配图网上搜索。

1、叠加的五条叠加法则参与测试的浏览器：IE6 / IE7 / IE8 / FF3 / 0P9.6 / SF3 / Chrome2 操作系统： Windows貌似很多同学对为什么这个div在上层，那个div在下层、无论如何设置z-index都无 法居上的问题纠结抓狂、上吐下泻、恶心失眠、郁郁而终，致使不敢随意使用层的叠加 但层的叠加效果，在交互设计中却频频出现，所以我们必须驾驭它，要驾驭它，就要掌 握其规律。首先明确几点在文中所需要用到的概念：1. 静态定位：position:static （为position属性的默认值）。2. 动态定位：position:relative或 position:

2、absolute或 position:fixed。3.祖元素：任意包含该元素的元素。5.父元素：直接包含该元素的祖元素。4.注：这些概念为作者自定义，仅用于本文。引用:关于同辈元素是个非常关键的词，这里还需要详细解释一下。 在这个例子中，div#a与div#b并不是“同辈元素”，只有像div#b和div#c这样拥有 同样父体div#f的的元素才能叫“同辈元素”。引用结束接下来看看这五条法则：法则一：同辈元素定位方式相同，且无z-index设置时，html靠后者居上。！DOCTYPE html PUBLIC -/W3C/DTD XHTML 1.0 Transitional/ENhttp:/www

3、.w3.org/TR/xhtmll/DTD/xhtmll-transitional.dtdhtml xmlns=http:/www.w3.org/1999/xhtmlheadmeta http-equiv二Content-Typecontent二text/html; charset=utf-8 /meta name二author content二Chomo /link rel=start href= title=Home /title法则一：同辈元素定位方式相同，且无z-index设置时，html靠后者居上。/title/headstyle type=text/cssdiv font:12px

4、/1.5 arial;div strong color:#fff; background:#036; display:inline-block;h3 strong color:#f00;/*-定义方块外形-*/.divl,.div2 background:#cff;border:1px solid #036;.grandDivl, .grandDiv2 padding:10px;border:lpx solid #060;width:174px;background:#cf9;.parentDiv1,.parentDiv2 padding:10px;border:1px solid #f06;

5、width:152px;background:#fcf;/*定义方块偏移位置、文字位置*/.grandDiv2 margintop:-50px;margin-left:95px;.parentDiv2 margin-top:-40px;margin-left:85px;.div2 margin-top：-20px;margin-left:75px;padding-top:30px;height:40px;.grandDiv2 .parentDiv2,.grandDiv2 .div2,.parentDiv2 .div2 margin:。；/stylebody法则一：同辈元素定位方式相同，且无z-

6、index设置时，html靠后者居上。div class二divl.divlposition:static/divdiv class二div2.div2position.staticdivclass二divlstyle二position:relative;.div1position.relative/divdivclass二div2style二position:absolute;.div2position.absolute/div/body法则二：同辈元素同为动态定位时，且有z-index设置时，z-index值大者居上。！D0CTYPE html PUBLIC -/W3C/DTD XHTML

7、 1.0 Transitional/ENhttp:/www.w3.org/TR/xhtmll/DTD/xhtmll-transitional.dtdhtml xmlns=http:/www.w3.org/1999/xhtmlheadlink rel=start href= title=Home /title法则二：同辈元素同为动态定位时，且有z-index设置时，z-index值大者居 上。/titlestyle type=text/cssdiv font:12px/1.5 arial;div strong color:#fff; background:#036; display:inline

8、-block;h3 strong color:#f00;/*-定义方块外形-*/.divl,.div2 height:7Opx;width:150px;background:#cff;border:1px solid #036;.grandDiv1,.grandDiv2 padding:10px;border:1px solid #060;width:174px;background:#cf9;.parentDiv1,.parentDiv2 padding:10px;border:1px solid #f06;width:152px;background:#fcf;/*定义方块偏移位置、文字位

9、置*/.grandDiv2 margin-top：-50px;margin-left:95px;.parentDiv2 margin-top：-40px;margin-left:85px;.div2 margin-top:-20px;margin-left:75px;padding-top:30px;height:40px;.grandDiv2 . parentDiv2,.grandDiv2 .div2,.parentDiv2 .div2 margin:。；/stylebody法则二：同辈元素同为动态定位时，且有z-index设置时，z-index值大者居上。 divclass二divlsty

10、le二position:relative;z-index:2;.divlposition.relative;z-index:2/divdivclass二div2style二position:relative;z-index:1;.div2position.relative;z-index:1/div/bodylink rel=start href= title=Home /tit le法则三：同辈元素定位方式不同时，动态定位居上。/tit le/headstyle type=text/cssdiv font:12px/1.5 arial;div strong color:#fff; backg

11、round:#036; display:inline-block;h3 strong color:#f00;/*-定义方块外形-*/.div1,.div2 height:70px;width:150px;background:#cff;border:1px solid #036;.grandDivl,.grandDiv2 padding:10px;border:1px solid #060; width:174px;background:#cf9;.parentDiv1,.parentDiv2 padding:10px;border:1px solid #f06; width:152px; b

12、ackground:#fcf;/*定义方块偏移位置、文字位置*/.grandDiv2 margintop:-50px;margin-left:95px;.parentDiv2 margin-top：-40px;margin-left:85px;.div2 margin-top：-20px;margin-left:75px;padding-top:30px;height:40px;.grandDiv2 . parentDiv2,.grandDiv2 .div2,.parentDiv2 .div2 margin:。；/stylebody法则三：同辈元素定位方式不同时，动态定位居上。/h3divcl

13、ass二divlstyle二position:relative;.div1position.relative/divdiv class二div2.div2position.static/divdiv class二div1.div1position.static/divdivclass二div2style二position:absolute;.div2position:absolute/div/body法则四：非同辈元素，任意一者及其祖元素不具备动态布局时,html靠后者居上。v!DOCTYPE html PUBLIC -/W3C/DTD XHTML 1.0 Transitional/EN ht

14、tp:/www.w3.org/TR/xhtmll/DTD/xhtmll-transitional.dtdvmeta http-equiv=Content-Type content=text/html; charset=utf-8 /vmeta name=author content=Chomo /title=Home /法则四：非同辈元素，任意一者及其祖元素不具备动态布局时，html靠后者居上。v/headvstyle type=text/cssdiv font:12px/1.5 arial;div strong color:#fff; background:#036; display:inl

15、ine-block; h3 strong color:#f00;/*-定义方块外形-*/.div1,.div2 height:70px;width:150px;background:#cff;border:1px solid #036;.grandDiv1,.grandDiv2 padding:10px;border:1px solid #060;width:174px;background:#cf9;.parentDiv1,.parentDiv2 padding:10px;border:1px solid #f06;width:152px;background:#fcf;/*-定义方块偏移位

16、置、文字位置-*/.grandDiv2 margin-top:-50px;margin-left:95px;.parentDiv2 margin-top:-40px;margin-left:85px;.div2 margin-top:-20px;margin-left:75px;padding-top:30px;height:40px;.grandDiv2 .parentDiv2,.grandDiv2 .div2,.parentDiv2 .div2 margin:。;v/stylevbodyvh3法则四：非同辈元素，任意一者及其祖元素不具备动态布局时，html靠后者居上。v/h3.parent

17、Divlposition:staitc.div1position:staitcv/div.div2position:staitcv/div.parentDiv2position:staitc.grandDiv1position:staitc.parentDiv1position:staitc.div1position:staitcv/div.div2position:staitcv/div.parentDiv2position:staitc;.grandDiv2position:static;法则五：【重要】非同辈元素，任意一者或其祖元素拥有动态定位时，同时各自向上寻 找动态定位的祖元素，并分

18、别从中拿出具备最高级别的祖元素（或其本身）进行比较。情况1：子元素的z-index无论多大，父元素大者居上。z-index:W.div2position:relative:,parentDiv2positiomelativefl,div1 position: staticz-index:：.parentDM position: relative情况 2：父元素居下，子元素也可以居上。.pare ntD iv 1 position: sta itc.div 1 position: relative；di72position:staitcjparentDi. 2position:staitc情况1

19、、情况2 结合扩展比较。Transitional/ENv!DOCTYPE html PUBLIC -/W3C/DTD XHTML 1.0http:/www.w3.org/TR/xhtmll/DTD/xhtmll-transitional.dtdvhtml xmlns=http:/www.w3.org/1999/xhtmlvheadvmeta http-equiv=Content-Type content=text/html; charset=utf-8 /vmeta name=author content=Chomo /vlink rel=start href= title=Home /vti

20、tle/去则五：非同辈元素，任意一者或其祖元素拥有动态定位时，同时各自向上寻找动 态定位的祖元素，并分别从中拿出具备最高级别的祖元素（或其本身）进行比较。div font:12px/1.5 arial;div strong color:#fff; background:#036; display:inline-block;h3 strong color:#f00;/*-定义方块外形-*/width:150px;background:#cff;border:1px solid #036;.grandDiv1,.grandDiv2 padding:10px;border:1px solid #06

21、0;width:174px;background:#cf9;.parentDiv1,.parentDiv2 padding:10px;border:1px solid #f06;width:152px;background:#fcf;/*-定义方块偏移位置、文字位置-*/.grandDiv2 margin-top:-50px;margin-left:95px;.parentDiv2 margin-top:-40px;margin-left:85px;.div2 margin-top:-20px;margin-left:75px;padding-top:30px;height:40px;.gra

22、ndDiv2 .parentDiv2,.grandDiv2 .div2,.parentDiv2 .div2 margin:。;v/stylevbodyvh3法则五vstrong （重要）:非同辈元素，任意一者或其祖元素拥有动态定位 时，同时各自向上寻找动态定位的祖元素至共有的祖元素的下一级为止，并分别从中拿出具 备最高级别的祖元素（或其本身）进行比较。vp情况1：子元素的z-index无论多大，父元素大者居上。 .parentDiv1position:relative；vstrongz-index:2v/strong .div1position:staticv/div.div2position

23、:relative；vstrongz-index:10000v/strongv/div .parentDiv2position:relative；vstrongz-index:1v/strongvp情况2：父元素居下，子元素也可以居上。.parentDiv1position:staitc.div1position:relativev/div.div2position:staitcv/div.parentDiv2position:staitcvp情况1、情况2结合扩展比较。.grandDiv1position:relative；vstrongz-index:3v/strong.parentDiv

24、1position:staitc.div1position:relative；vstrongz-index:10000v/strongv/div.div2position:staitcv/div.parentDiv2position:relative；vstrongz-index:4v/strongv/div.grandDiv2position:static;v/html引用:其实前四点都是基础，只有第五点比较难于理解，这里详细解释一下在这个例子中，我们来比较div#a_inner5和div#b_inner4的层叠关系。 到它们所共同拥有的祖元素 div#ab 的下一级为止， div#a_in

25、ner5 的祖元素包括： div#a,div#a_innerl,div#a_inner2,div#a_inner3,div#a_inner4 div#b_inner4 的祖 元素包括：div#b,div#b_inner1,div#b_inner2,div#b_inner3然后分析它们的祖元素中具有动态定位的：iv#a_inner5的祖元素中含有动态定位的元素有： div#a, div#a_inner3；div#b_inner4 的祖元 素中含有 动态定位 的元素有 ： div#b_inner3。然后再拿出最高级进行比较： div#a #div#b_inner3。父元素居下，子元素也可以居上的情况，则是利用非同辈元素在祖元素具备动态布局时 其比较已经与position:static无关，而其祖元素却可以通过html的位置来进行比较。引用结束当然，有时候还存在特例，比如flash、比如ie6中的select无法遮住，这些都属于异 常情况，大家可以自己搜索一下相关文章。经典论坛交流：htt p:/ thread-2924732TT.h tml本文链接：