CSS 层叠加的5条原则

所属分类: 网页制作 / CSS 阅读数: 2036
收藏 0 赞 0 分享

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

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

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

引用:

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

  1. <div>
  2.     <div></div>
  3.     <div id="a"></div>
  4.     <div></div>
  5.     <div></div>
  6.     <div></div>
  7.     <div></div>
  8. </div>
  9. <div id="f">
  10.     <div></div>
  11.     <div id="b"></div>
  12.     <div id="c"></div>
  13.     <div></div>
  14.     <div></div>
  15.     <div></div>
  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.     <div id="a" style="position:relative; z-index:100;">
  3.         <div id="a_inner1">
  4.             <div id="a_inner2">
  5.                 <div id="a_inner3" style="position:relative; z-index:98;">
  6.                     <div id="a_inner4">
  7.                         <div id="a_inner5">
  8.                         </div>
  9.                     </div>
  10.                 </div>
  11.             </div>
  12.         </div>
  13.     </div>
  14.     <div id="b">
  15.         <div id="b_inner1">
  16.             <div id="b_inner2">
  17.                 <div id="b_inner3" style="position:relative; z-index:99;">
  18.                     <div id="b_inner4">
  19.                     </div>
  20.                 </div>
  21.             </div>
  22.         </div>
  23.     </div>
  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无法遮住,这些都属于异常情况,大家可以自己搜索一下相关文章。

更多精彩内容其他人还在看

Opera中国的WEB标准课程

网页制作Webjx文章简介:在这篇文章里,我要向大家介绍我和其他很多人花费数月时间开发的一个课程——Web标准课程,该课程旨在向大家提供Web设计和开发的坚实基础,无论读者是谁,此教程完全免费、可访问,并且不需要预备知识。当然,我主要还
收藏 0 赞 0 分享

CSS样式表渐进增强的基本概念

网页制作Webjx文章简介:如果你挠着头想弄清楚优雅降级和渐进增强的区别,我告诉你,这是视角问题。优雅降级和渐进增强都考虑网站在各种设备的各种浏览器上如何良好运转。两者区别的关键在于它们各自关注的焦点,以及这种关注对工作流程的影响
收藏 0 赞 0 分享

简单介绍Web Developer插件制作网页

网页制作Webjx文章简介:Firefox浏览器是一个良好支持W3C标准的开放源代码的浏览器,拥有Linux/Windows/Mac版本。因为Firefox浏览器良好支持W3C标准,所以使用Firefox来调试网页是非常好的。 Firefox浏览器是
收藏 0 赞 0 分享

CSS布局带来的巨大影响:CSS display属性值

网页制作Webjx文章简介:网页元素应用上那些与表格相关的display属性值后,能够模仿出与表格相同的特性。我将会在该文中给大家演示这种方法给CSS布局带来的巨大影响。 应原书编辑要求,先在文章顶部给出链接:《Everything You
收藏 0 赞 0 分享

用div css模拟表格对角线

这只是探讨一种CSS模拟表格对角线的用法,实际在工作中可能觉得这样做有点小题大作,这不是本主题讨论的重点。如果对此深以为然的朋友,请一笑过之 首先声明: 这只是探讨一种CSS模拟表格对角线的
收藏 0 赞 0 分享

IE Firefox在css中的差别 (部分)

1、单位问题 问题:任何距离的数值ie可以不加单位,ff必须要求写单位(0除外) 解决:写全单位如padding:0px; 2、水平居中 问题:div里的内容,ie默认为center,而ff默认left 解决:mairgin:0px auto; 3、高度问题
收藏 0 赞 0 分享

不用js可以实现信息提示效果

[code] <style> body { font:verdena; font-size:14px; color:#000 } h1{ font:verdena; font-size:22px; color:#000 } h2{ font:verdena;
收藏 0 赞 0 分享

CSS解决未知高度的垂直水平居中自适应问题

今天有人问起,晚上试着写出来,供参考; 以下代码兼容主流浏览器IE6、IE7、Firefox、Opera。 从最简单的开始………… 一、如何让一个DIV水平居中? 这个简单不作过多说明! [code] <st
收藏 0 赞 0 分享

CSS cursor 属性 -- 鼠标指针样式效果

取值: [ [<uri> ,]* [ auto | crosshair | default | pointer | move | e-resize | ne-resize | nw-resize | n-resize | se-resize | sw-resize |
收藏 0 赞 0 分享

css 简单区别ie6,ie7,firefox的写法

同一样式里可以这样 [code] margin:17px; FF +margin:17px; IE6 IE7 _margin:17px; IE6 [/code] 按这个顺序,刚好区分开三个浏览器
收藏 0 赞 0 分享
查看更多