|
√ Google adsense申请技巧 √ 本站核心代理域名注册主机业务
√ 快速发布你的买卖域名买卖网站信息
√ 1元注册 cn域名
√ 站长每日新闻导读 √ ·推荐万网空间￥120元 150m √ 站长网：站长必上的网站 √ 网站联盟大全 √ 本站代理万网域名55空间120元 |
堆放
元素的重叠可能是偶然的，也可能是故意设计的。如果是故意设计的，其中必须有一个元素比其它元素优先，在最上面显示。这就是Z索引所起的作用。（如果你还记得在几何课上学习的知识，Z索引就是当将一个元素放入三维空间时的Z数轴。）
使用CSS定位进行Web应用开发时，你应该考虑层的概念；也就是说，元素在页面上堆叠放置或放入层中。Z索引定义了元素在堆中的位置。如果没有指定Z索引值，系统默认将最后一项放在最上面。
你可以通过为定位元素指定一个Z索引值来改变系统的默认行为。Z索引值是一个整数，当元素堆放时，元素Z索引值越大显示的位置越靠上。同时，你还可以为两个元素赋予相同的Z索引值。如果这些元素被堆放，他们将会按照写入HTML中的顺序显示，最后一个元素出现在最上面。也就是使用默认情况。
此外，还可以为Z索引指定负数值。在同一个堆放序列中，索引值为负数的元素在所有未定义或定义为正数值的元素之后。然而，负数索引值并不一定能被所有浏览器处理，IE5.5和Opera5就不支持负数Z索引值。
列表B中包含了一个图片，文本和超链接。图片的Z索引值为1，文本的值为100，因此文本始终出现在图片的上面。在这个例子中，本文出现在图片的上面。链接的Z索引值为0，因此它出现在文本和图片的下面。给定链接的左边距和顶部页边距，只有一半是可见的，因为叠放顺序中它在图片的下面。（此处是列表B的链接。）
<html><head>
<style type="text/css">
.trlogo { position:absolute; left:0px; top:0px; z-index:1; width: 200; height: 100; }
.header {position: absolute;left:0;top:5;z-index:100;font-size:20pt; font-face:Arial;font-weight:bold;color: red; }
.link{position:absolute; left:75;top:50;z-index:0;font-size: 10pt; font-face:Arial;font-weight:bold; }
</style></head>
<body>
<p class="header">Thanks for reading.</p>
<img class="trlogo" src="/upimg/allimg/070925/1549540.gif">
<a href="http://techrepublic.com.com/1200-3513-5737146.html" class="link">Web
Development Newsletter Archive</a>
</body></html>
当在一个页面中放置大量元素时，定位和叠放有各种各样的情况，这可能是件非常困难的工作。W3C说明了如何评估每个元素。
控制页面布局
当使用CSS的定位特性时，Z索引值可用来控制哪些元素优先，当/如果元素堆叠时，哪些元素可以全部可见。默认情况下，最后一个元素优先，但是你可以通过赋予元素最大Z索引值从而使之出现在最上面。务必要在各种目标浏览器中测试和验证你的CSS。
你在Web应用中使用CSS定位和堆放元素吗？同Web开发社区分享你的技巧和经验吧。
Tony Patton从应用开发人员开始他的职业生涯，先后获得了Java ，VB，Lotus和XML认证来丰富他的知识。