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

CSS样式表
CSS 表单元素不继承body的字体属性
网页制作学习教程 CSS Position
网页设计学习教程 CSS盒模型
vertical-align 表单元素垂直对齐的解决方法
不用Cookie的仿刷新二级高亮菜单
CSS3 优势以及网页设计师如何使用CSS3技术
CSS 网页制作 提高CSS可阅读性
CSS 样式表中引用图片地址在各浏览器中的差异
CSS Sprite优化 减少HTTP链接数
网页制作中应用的50个CSS技巧(国外)
CSS 英文教程 CSS语法
CSS 网页文字渐变效果
纯css 圆角实现代码
CSS 新的图像替换方法
不必需的样式脚本文件导致页面不能及时更新
CSS 约定写法 利用扩展
最全的CSS浏览器兼容问题小结
CSS 网页图文混排的10个技巧
IE的CSS制作网页技巧3则
创造100% 自适应css布局的行之有效的方法

No. « 78 79 80 81 »

技术文章搜索

关键字

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

出处:互联网   整理: 软晨网（RuanChen.com）   发布: 2009-10-12   浏览: 48 ::
收藏到网摘: 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无法遮住，这些都属于异常情况，大家可以自己搜索一下相关文章。