全透视：CSS Z-index 属性（3）
作者：竹馥堂主 来源：osmn00.com 发布时间：2009-09-21 12:52:00
为什么它会产生混乱？
即时Z-index并不是一个难以理解的属性，但它却会因错误的假设而使很多初级的开发人员陷入混乱。混乱发生的原因是因为Z-index只能工作在被明确定义了absolute，fixed或relative 这三个定位属性的元素中。
为了证明Z-index只能工作于被定位了的元素中，这里有同样的三个BOX，它们应用了Z-index属性来尝试打破他们自然的层叠顺序。
灰色的BOX具有“9999”的Z-index值，蓝色的BOX有“500”的Z-index值，金色的有“1”的Z-index值。合乎逻辑的，你会认为这三个BOX的层叠顺序会倒过来。但事实却不是这样，因为这些元素都没被设定position属性。
下面是同样的三个BOX，分别都被设置了position: relative，他们的Z-index值还是按照上面那段设定。
现在的结果是我们所期待的了：这些元素的层叠顺序实现了反向；灰色的BOX覆盖在蓝色之上，蓝色的覆盖在金色之上。
语法
#grey_box {
width: 200px;
height: 200px;
border: solid 1px #ccc;
background: #ddd;
position: relative;
z-index: 9999;
}
#blue_box {
width: 200px;
height: 200px;
border: solid 1px #4a7497;
background: #8daac3;
position: relative;
z-index: 500;
}
#gold_box {
width: 200px;
height: 200px;
border: solid 1px #8b6125;
background: #ba945d;
position: relative;
z-index: 1;
}
重复一下，Z-index属性只能工作于那些被定义了position属性的元素中。这并没有被足够的重视，尤其是对于那些新手。
0
投稿猜你喜欢
- 在许多情况下，当迁移至SQL Server 2008之前必须了解那些反对和放弃功能的具体情况。下文是几个主要功能在兼容性上的问题列表：1.S
- 对于更完整的代码可以参考，这个是支持数据库的版本。经过测试Asp+Ajax仿google搜索提示效果 数据库版google搜索提示.rar
- 开源的MySQL并不能取代非共享的私有数据库在企业中的应用，于是这些开源数据库的支持者们想把解决Web应用程序开发工具的可扩展性问题看作是获
- 一看，C盘只有不到2M可用空间，一查原因，sqlserver安装路径下的log目录文件占了好大，5G多， 于是上网搜了下，解决了： 把与sq
- 本程序属于一种特别的方法。使用范围比较有限，而且有一定的危险性。借鉴了asp后门里的一些方法。由于读取某IP的网卡MAC地址本程序通过调用a
- 看看下面：function zr4(y)' 准备数据dim z(10)z(1)="ONE&q
- 比如可以定义开学时间为2009年2月8日，然后程序可以算出，今天距开学那天已经是第几周，非常急需这个程序，忘高手们能提供一个，先谢谢了！自己
- 相信各位phper在日常开发中，会经常遇到需要合并数组的场景。那么，在php中都有哪一些方法可以用来合并数组呢。第一种，使用&ldq
- 1**：请求收到，继续处理2**：操作成功收到，分析、接受3**：完成此请求必须进一步处理4**：请求包含一个错误语法或不能完成5**：服务
上次帮朋友写过的一个简单切换效果,超级简单,但也比较适用.因为用到了CSS Sprite技术,DEMO中附带了IE6兼容png的JS.核心J- asp网站程序在国内运用很广,但是类似于im286.asp?id=20050307213811这样的url有点不利于搜索引擎的收录,也就是说
- ASP 组件 FILE对象当前，基于浏览器/服务器模式的应用比较流行。当用户需要将文件传输到服务器上时，常用方法之一是运行FTP服务器并将每
- <!--这是一个主页文件--><html><head><meta http-equiv="
- 那是一杠还是两杠呢？最简单的方式就是拿出钱包，掏出张“新”的50或100，翻到背面的银线上，就会发现两杠的符号。这个是以前跟同事在讨论是一杠
- XML文档对象模型（DOM）是什么？可扩展标记语言XML的基础是 DOM。XML 文档具有一个称为节点的信息单元层次结构；DOM 是描述那些
- 昨天在写“同IP站点查询”工具的时候，需要先用ASP获取查询域名的IP，本来是用WSHSHELL组件，代码如下：<％@LANGUAGE
- 为什么传输几千个表的数据时向导会失败?当前的向导体系结构会创建一个 DTS 软件包数据流以传输数据。但如果要处理几千个表，则会遇到可伸缩性限
- 还是网站在不同操作系统不同浏览器下兼容性的问题,但难度加了一层.如果是要检查用户登录后的页面的兼容性,该怎么办?现在一般的测试网站,都是提交
- 在html里的每一个标签都有其自身的意义，而H标签作为标题标签，它的意义更是至关重要。对于H标签的用法特别是h1的用法一直是个争议的问题，也
- 经常到这来抄抄改改代码，也贡献一个代码，主要是讨论研究用，没有封装可以进一步改进<!DOCTYPE html PUBLIC "
