如何利用CSS堆定位元素位置

扫一扫
分享文章到微信
扫一扫
关注官方公众号
至顶头条

使用CSS的z-index属性控制元素的堆放可以很容易的解决这个问题。本文为大家详细介绍CSS堆放元素的使用。

作者：builder.com.cn 2007年6月25日

关键字：

列表A中的例子包含了相对定位和绝对定位。页面使用绝对定位和百分比值被水平分为三部分。文本使用相对定位放置在每部分中。（如果你想查看代码，请点击列表A的链接）

<html><head>
<title>CSS Positioning </title>
<style>
DIV#top {position:fixed;top:0;bottom:20%;left:0;right:90%;background:yellow;height:20%;margin:0;}
DIV#middle {position:fixed;top:21%;bottom:80%;left:0;right:90%;background:gray;height:60%;margin:0;}
DIV#bottom {position:fixed;top:81%;bottom:90%;left:0;right:90%;background:yellow;height:20%;margin:0;}
.title{position:relative;left:25%;top:10%;bottom:5%;right:90%;font-size:20pt;}
</style></head><body>
<div id="top">
<div class="title">This is a test</div>
</div>
<div id="middle">
<div class="title">Place some text here.</div>
</div>
<div id="bottom">
<div class="title">Thanks for visiting!</title>
</div>
</body></html>

当使用CSS定位在一个页面放置多个元素时，不可避免的会出现两个或更多元素占用页面相同位置的情况。

堆放

元素的重叠可能是偶然的，也可能是故意设计的。如果是故意设计的，其中必须有一个元素比其它元素优先，在最上面显示。这就是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="http://i.techrepublic.com.com/images/200608/logo.gif">
<a href="http://techrepublic.com.com/1200-3513-5737146.html" class="link">Web
Development Newsletter Archive</a>
</body></html>

当在一个页面中放置大量元素时，定位和叠放有各种各样的情况，这可能是件非常困难的工作。W3C说明了如何评估每个元素。

VIP专区

VIP用户

普通用户

邮件订阅

如果您非常迫切的想了解IT领域最新产品与技术信息，那么订阅至顶网技术邮件将是您的最佳途径之一。

重磅专题

往期文章

如何利用CSS堆定位元素位置

业界热点: