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

tznktg · 发表于 2007-9-25 20:02:01

利用CSS定位Web页面上的元素有很多需要注意的地方，当你需要一个元素出现在另一个元素的位置时，经常会突然出现有趣的场景。使用CSS的z-index属性控制元素的堆放可以很容易的解决这个问题。本文为大家详细介绍CSS堆放元素的使用。

定位

元素的堆放顺序依赖于CSS的定位方面。有三种定位方式可供选择：相对定位、绝对定位和固定位置。

相对定位：定位元素通过侧偏移属性进行移动。当一个项目是相对定位时，这时会创建一个包含块将所有该项目的子项目包含其中。该块与元素的定位位置相一致，这样就可以相对一个元素的父元素来定位它，因为它的父元素的位置已经确定了。
绝对定位：当元素绝对定位时，它们就被完全从页面的其它元素流中移除；也就说与绝对定位元素根据包含它们的块定位，边缘使用侧偏移属性定位。绝对定位的元素不随其它元素浮动，其它元素也不围绕它浮动。因此，一个绝对定位的元素可能会覆盖其它元素。
固定位置：固定位置的元素和绝对定位模型类似，但是固定位置元素被完全从文档中移除，不与文档中的任何元素有相对位置。使用定位置定位，你可以仅使用CSS就可以创建类似HTML框架的接口。
定位元素需要指定偏移值。这些偏移通过使用顶部、左边、右边和底部样式属性来指定。每个值被解释为相应元素的外部边缘根据它原来的位置应该移动距离。

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

<html><head>
<title>CSS Positioning </title>
<style>
DIV#top
DIV#middle
DIV#bottom
.title
</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定位在一个页面放置多个元素时，不可避免的会出现两个或更多元素占用页面相同位置的情况。

tznktg · 发表于 2007-9-25 20:02:26

堆放

元素的重叠可能是偶然的，也可能是故意设计的。如果是故意设计的，其中必须有一个元素比其它元素优先，在最上面显示。这就是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说明了如何评估每个元素。

控制页面布局

当使用CSS的定位特性时，Z索引值可用来控制哪些元素优先，当/如果元素堆叠时，哪些元素可以全部可见。默认情况下，最后一个元素优先，但是你可以通过赋予元素最大Z索引值从而使之出现在最上面。务必要在各种目标浏览器中测试和验证你的CSS。

你在Web应用中使用CSS定位和堆放元素吗？同Web开发社区分享你的技巧和经验吧。

Tony Patton从应用开发人员开始他的职业生涯，先后获得了Java ，VB，Lotus和XML认证来丰富他的知识。

		自动登录	找回密码
密码			注册

全国各地医院查询	重量转换换算	RGB颜色查询	交通标志大全	各类快递查询
简体繁体转换	黄金价格实时走势	万年历查询	实时汇率转换	列车时刻查询
在线翻译工具	CSS中文手册	HTML学习教程	MySQL中文手册	JavaScript中文手册
PHP安全基础手册	PHP5面向对象编程教程	正则表达式系统教程	SQL Server精华	Apache 2.2 中文手册
DOS命令全集指南	windows脚本技术中文版	股票行情查询	历史上的今天	邮编区号查询
长度转换换算	货币汇率转换	常用电话号码	体育彩票查询	手机位置查询
域名Whois信息查询	谷歌PR值查询	台州网站建设	台州网站开发	台州域名注册
天气预报查询	长度转换换算器	在线电子地图	车牌号码查询	中国百家姓查询

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

相关帖子

浏览过的版块