层叠加的五条叠加法则
作者：14px 来源：蓝色理想 发布时间：2009-05-01 12:07:00
标签：层,叠加,css,元素
[参与测试的浏览器：IE6 / IE7 / IE8 / FF3 / OP9.6 / SF3 / Chrome2 ]
[操作系统：Windows]
貌似很多同学对为什么这个div在上层，那个div在下层、无论如何设置z-index都无法居上的问题纠结抓狂、上吐下泻、恶心失眠、郁郁而终，致使不敢随意使用层的叠加。但层的叠加效果，在交互设计中却频频出现，所以我们必须驾驭它，要驾驭它，就要掌握其规律。
首先明确几点在文中所需要用到的概念：
静态定位：position:static（为position属性的默认值）。
动态定位：position:relative或position:absolute或position:fixed。
祖元素：任意包含该元素的元素。
父元素：直接包含该元素的祖元素。
同辈元素：拥有共同的父元素的元素。
注：这些概念为作者自定义，仅用于本文。
引用:
关于同辈元素是个非常关键的词，这里还需要详细解释一下。
<div>
<div></div>
<div id="a"></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<div id="f">
<div></div>
<div id="b"></div>
<div id="c"></div>
<div></div>
<div></div>
<div></div>
</div>
在这个例子中，div#a与div#b并不是“同辈元素”，只有像div#b和div#c这样拥有同样父体div#f的的元素才能叫“同辈元素”。
引用结束
接下来看看这五条法则：
法则一：同辈元素定位方式相同，且无z-index设置时，html靠后者居上。
运行代码框
0
投稿猜你喜欢
- ORACLE的数据字典是数据库的重要组成部分之一，它随着数据库的产生而产生, 随着数据库的变化而变化, 体现为sys用户下的一些表和视图。数
- 哲学上有种说法，“运动是绝对的，静止是相对的”。我们在编写各样的效果时，时常会碰到动画。下面的章，将讨论动画的原理以及实现。动画，简而言之就
- 定义： 何为触发器？在SQL Server里面也就是对某一个表的一定的操作，触发某种条件，从而执行的一段程序。触发器是一个特殊的存储过程。
- innerHTML,outerHTML innerHTML检索或设置标签内的内容；outerHTML检索或设置整个标签的内容（包含标签）。&
在 Web 编辑器领域，CKEditor – 七年的专注，赢取的是王者风范。TinyMCE – 五年前的小家碧玉，如今已成长为大家闺秀。Go- 通过《SQL Server 数据库备份和还原认识和总结（一）》，相信您对数据备份和还原有了一个更深入的认识，在上文中我没有对事务日志做剖析，
- 我用asp+access写程序， sql="select *&
- 您可以将SQL Server 数据库引擎升级到 SQL Server 2008。SQL Server 安装程序只需最少的用户干预就可升级 S
- 安装方法: regsvr32 parmf.dll附 如果想取消注册可以:regsvr32 /u&nb
- Dreamweaver MX 2004新增加了表格宽度辅助线功能，让我们在编辑网页表格的时候能清楚地看到表格中各单元的宽度以及变化，很直观。
- 如何取得刚添加的记录自动增加的ID字段的号码？我们用下面这个程序就行：rs(1)=oldrname &nb
- 上文：栅格:一以贯之Jacci Howard Bear 的英文原文：http://desktoppub.about.com/od/grids
- 大家都知道，在SQL脚本中设置多字段做关键字相对比较简单，例：primary key(id1,id2) ,但用脚本建数据库就比较麻烦了。那么
- JavaScript中的字符串函数没有像VBScript＼ASP中的内部函数那么全.不能像VB那样直接利用left和right函数来实现对字
- 来看看javascript怎么实现自动点击超级链接吧，主要使用了js中的onclick事件。这里推荐大家看看这篇文章js鼠标事件大全。看了这
- sql="select * from admin where users='"&users&&q
- 最近要做一个网站需要用到天气预报，本来是想找到API，自己写一个自己的天气预报小程序的，没有成功，只好去找现成的代码调用。经过测
- 本文从多个角度来讲解如何在Access数据库上如何上传并且显示上所上传图片。在 * 站制做过程中，需要上传图片、显示图片，上传的图片要能够保
- conn.execute、rs.open之间的差别,conn.execute、rs.open、command.execute方法用法大大不同
- 1.如果每页都增加打印时间,又如何设置?打印时间的,你可以参考 for(var i=0;i<page.length;i++)
