理解绝对定位和相对定位布局
作者：cyq 来源：webteam 发布时间：2009-03-19 13:53:00
标签：css,布局,相对定位,绝对定位,网页重构
概要：
本文主要描述XHTML中相对定位和绝对定位各自的本质、用法、区别和两者之间的关系。以及使用CSS的Left、Right、Top、Bottom属性（偏移属性）和Margin属性（外边距）对定位块级元素进行布局的方法。
本文的示例源码下载：
远程下载：
这个附件demo。（9.15 KB）
本站下载：328_demo.rar （9.15 KB）
说明：
占位空间：元素在文档流中所占据的空间。
物理空间：元素本身所占据的空间。
下面分3种情况分别对相对定位和绝对定位进行讨论：
1.只使用css第一组属性布局定位元素的情况
2.只使用css第二组属性布局定位元素的情况
3.混合使用第一组和第二组属性的情况
图1为未定位时的初始效果，
层级关系为：
<div
<div box1
<div box2
<div box3
效果图：
图1
一、用相对定位布局块级元素
元素设置position值： position:relative
此属性值的设置，元素没有脱离文档流，还是普通流定位模型的一部分，会对文档流中其它元素布局产生影响。（说明：蓝色代表占位空间，红色代表元素）
1.仅使用left、right、top和bottom属性布局相对定位元素的情况
元素原本所占的占位空间仍保留，物理空间偏移。
图2中，设置元素的left和top的值，对box2进行布局，可以发现除了box2偏移之外，其他块级元素的位置没有被影响，可见box2的占位空间还是存在的。
层级关系为：
<div
<div box1
<div box2 ——– position:relative ; top:-60px; left:80px;
<div box3
效果图：
图2
0
投稿猜你喜欢
介绍分面是指事物的多维度属性。例如一本书包含主题、作者、年代等分面。而分面搜索是指通过事物的这些属性不断筛选、过滤搜索结果的方法。可以将分面- 1.having 子句的用法 having 子句对 group by 子句所确定的行组进行控制,having 子句条件中只允许涉及常量,聚组
- 如何实现在下拉菜单里输入文字？ 用这个代码试试看，应该可以的：<script>function pp(){se.opt
- 目前定时的操作有：一、Html页面的定时刷新(Refresh－－刷新 ) 1，Refresh (刷新) 代码使用说明 说明：让网页多长时间（
- 在IE 浏览器中使用 jquery的fadeIn() 效果 英文字符字体加粗的解决方法分享。<div id='tes
- 前端时间写了一篇《利用CSS框架进行高效率的站点开发》，有不少朋友问我相关的问题。很早5key就在公司进行CSS框架的架构，也对不少朋友提出
- 1.函数array()功能:创建一个数组变量格式:array(list)参数:list为数组变量中的每个数值列,中间用逗号间隔例子:<
- 代码如下: Function closeHTML(strContent) Dim arrTags, i, OpenPos, ClosePos
- CSS圆角的现实一直是大家所热衷的话题，我们进行CSS布局一直强调语义，强调文档的结构。圆角作为页面的外面表现，应该分离到CSS文件中，可以
- 这是个老话题了，之所以再拿出来说，是因为浏览器一直在进步，以前最好的方法现在不一定是最好的。1 如何进行字符串连接？首先让我们来回顾一下字符
- 这是base2的作者Dean Edwards 2007年3月份的一篇文章。最近正在折腾JavaScript库，感觉Dean给出的这些规则很中
- 引言在负责咨询工作的过去 6 年中，我曾多次听说关于数据访问和操作方面的问题，它时刻困扰着用户：“如何编写应用程序，以便
- 可以在Mac OS X 10.2.x(“Jaguar”)和以上版本上Mac OS X使用二进制安装软
- 代码如下:Select * from T_Employee select FName,FAge from T_Employee select
- 要想更好的理解 css， 尤其是 IE 下对 css 的渲染，haslayout 是一个非常有必要彻底弄清除的概念。大多IE下的显示错误，就
- 下面是虚机维护中，经常碰到的一些ASP程序中的数据库调用的错误，现收集整理如下：
- 表单验证是WEB开发中经常遇到的问题，我们以前常见的做法是：在客户端对表单域进行内容的检查，看是否是满足一定的要求或满足一定的结构，比如：是
- 有的时候，我们在网页中会用到复选框，也就是多选框，当用户提交输入信息的时候我们会获取复选框的内容，然后保存到数据库中，如经常用到的是用户输入
- 1 导言 Microsoft 在Microsoft SQL Server 2000中推出了与XML相关的功能以及Transact-SQL 关
- javascript实现翻页效果：<html> <head> <title>上下翻页看 - aspxho
