当前位置: 首页 > 图文教程 > 网页制作 > CSS样式表 > CSS 层叠加的5条原则

CSS样式表
CSS网页设计 IE8和IE7共存
CSS2 打印属性让打印HTML文档不出问题
制作网页中设计段落缩进的方法
CSS border 属性使用说明
CSS border-style 属性使用方法
CSS border-color 属性使用方法
CSS border-width 属性使用教程
CSS padding属性定义边内补白
CSS margin 属性定义边外补白
网页布局教程 掌握CSS网页布局属性
css 背景样式属性说明
span margin 设置生效
html 滚动条在IE6和IE7中兼容性问题
IE6 两个div有间隙的问题（IE 3px bug）
CSS 数字和字母将容器撑大问题解决
换个角度看页面重构中的语义化
DIY属于个人开发使用的CSS Reset
CSS 空格引起网页布局间距问题
CSS 网页制作时遇到问题的快速参考技巧
css li 去掉点的样式写法

No. « 20 21 22 23 »

技术文章搜索

关键字

CSS样式表 中的 CSS 层叠加的5条原则

出处:互联网   整理: 软晨网（RuanChen.com）   发布: 2009-10-12   浏览: 94 ::
收藏到网摘: n/a

首先明确几点在文中所需要用到的概念：

       
  1. 静态定位：position:static（为position属性的默认值）。
    2.    
  2. 动态定位：position:relative或position:absolute或position:fixed。
    3.    
  3. 祖元素：任意包含该元素的元素。
    4.    
  4. 父元素：直接包含该元素的祖元素。
    5.    
  5. 同辈元素：拥有共同的父元素的元素。

注：这些概念为作者自定义，仅用于本文。

引用:

关于同辈元素是个非常关键的词，这里还需要详细解释一下。

       
  1. <div>
    2.    
  2.     <div></div>
    3.    
  3.     <div id="a"></div>
    4.    
  4.     <div></div>
    5.    
  5.     <div></div>
    6.    
  6.     <div></div>
    7.    
  7.     <div></div>
    8.    
  8. </div>
    9.    
  9. <div id="f">
    10.    
  10.     <div></div>
    11.    
  11.     <div id="b"></div>
    12.    
  12.     <div id="c"></div>
    13.    
  13.     <div></div>
    14.    
  14.     <div></div>
    15.    
  15.     <div></div>
    16.    
  16. </div>

在这个例子中，div#a与div#b并不是“同辈元素”，只有像div#b和div#c这样拥有同样父体div#f的的元素才能叫“同辈元素”。

引用结束

接下来看看这五条法则：

法则一：同辈元素定位方式相同，且无z-index设置时，html靠后者居上。

法则二：同辈元素同为动态定位时，且有z-index设置时，z-index值大者居上。

 

 猛点这里测试

法则三：同辈元素定位方式不同时，动态定位居上。

猛点这里测试

法则四：非同辈元素，任意一者及其祖元素不具备动态布局时，html靠后者居上。

 

猛点这里测试

法则五：【重要】非同辈元素，任意一者或其祖元素拥有动态定位时，同时各自向上寻找动态定位的祖元素，并分别从中拿出具备最高级别的祖元素（或其本身）进行比较。 

       
  1. <div id="ab" style="position:absolute;">
    2.    
  2.     <div id="a" style="position:relative; z-index:100;">
    3.    
  3.         <div id="a_inner1">
    4.    
  4.             <div id="a_inner2">
    5.    
  5.                 <div id="a_inner3" style="position:relative; z-index:98;">
    6.    
  6.                     <div id="a_inner4">
    7.    
  7.                         <div id="a_inner5">
    8.    
  8.                         </div>
    9.    
  9.                     </div>
    10.    
  10.                 </div>
    11.    
  11.             </div>
    12.    
  12.         </div>
    13.    
  13.     </div>
    14.    
  14.     <div id="b">
    15.    
  15.         <div id="b_inner1">
    16.    
  16.             <div id="b_inner2">
    17.    
  17.                 <div id="b_inner3" style="position:relative; z-index:99;">
    18.    
  18.                     <div id="b_inner4">
    19.    
  19.                     </div>
    20.    
  20.                 </div>
    21.    
  21.             </div>
    22.    
  22.         </div>
    23.    
  23.     </div>
    24.    
  24. </div>

 

情况1：子元素的z-index无论多大，父元素大者居上。

情况2：父元素居下，子元素也可以居上。

情况1、情况2结合扩展比较。

其实前四点都是基础，只有第五点比较难于理解，这里详细解释一下：

在这个例子中，我们来比较div#a_inner5和div#b_inner4的层叠关系。
到它们所共同拥有的祖元素div#ab的下一级为止，div#a_inner5的祖元素包括：div#a,div#a_inner1,div#a_inner2,div#a_inner3,div#a_inner4；div#b_inner4的祖元素包括：div#b,div#b_inner1,div#b_inner2,div#b_inner3。
然后分析它们的祖元素中具有动态定位的：div#a_inner5的祖元素中含有动态定位的元素有：div#a,div#a_inner3；div#b_inner4的祖元素中含有动态定位的元素有：div#b_inner3。
然后再拿出最高级进行比较：div#a > #div#b_inner3。

父元素居下，子元素也可以居上的情况，则是利用非同辈元素在祖元素具备动态布局时，其比较已经与position:static无关，而其祖元素却可以通过html的位置来进行比较。

引用结束

当然，有时候还存在特例，比如flash、比如ie6中的select无法遮住，这些都属于异常情况，大家可以自己搜索一下相关文章。