理解绝对定位和相对定位布局
作者：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
投稿猜你喜欢
之前介绍过python开发工具Jupyter的使用，今天继续讲解python的数据类型，python中有整型、浮点型、字符串、布尔类型，我们- 什么是Dynamic HTML 今天我们以问答的形式来讲述什麽是Dynamic Html。问：亲爱的网猴，我经常看到讲述有关“Dynamic
- 一.局部变量、全局变量1.什么是局部变量作用范围在函数内部，在函数外部无法使用2.什么是全局变量在函数内部和外部均可使用3.如何将函数内定义
- 继续Mootools常用方法扩展，依然还是String类的扩展。方法：unescapseHTML说明：这个上次忘了，和escapseHTML
- 简介Python 中有个序列化过程叫作 pickle，它能够实现任意对象与文本之间的相互转化，也可以实现任意对象与二进制之间的相互转化。也就
- 身边的人竟然不玩“跳一跳了”，都迷上了一个叫“冲顶大会”的东西，考了很多各学科的冷知识，文学、数学、地理、生物、动漫、八卦…小编网上找到一些
- 在python中利用numpy创建一个array， 然后我们想获取array的最大值，最小值。可以使用一下方法：一、创建数组这样就可以获得一
- 一、先来看看Python星空图代码绘制成品1 两个人的星空星空下，欲执子之手，相倚长青树。看皎洁月色，闻乡间气息，赏佳人芳心。2 明月相伴的
- cgi.h #ifndef CGI_H#define CGI_H#include <stdio.h>#include <s
- 共存问题我之前一直使用的是SQL2012版本的数据库管理工具，为了与时俱进，我也尝试更新一下版本，当然SQLServer管理工具是可以多版本
- blankzheng的blog：http://www.planabc.net/1、使用fieldset和legend标签在form中，我们经
- 这篇文章主要介绍了Python tkinter三种布局实例详解,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,
- 公用表表达式简介：公用表表达式 (CTE) 可以认为是在单个 SELECT、INSERT、UPDATE、DELETE 或 CREATE VI
- 本篇文章所编写的代码，已经放到了gitee上了:gitee.com/pdudo/golea…本文所依赖的环境为:在目前
- 1.打包项目期间遇到的坑，提前说下，避免重复工作。1.1打包的app出现白屏。出现原因：路径不对，需要改config\index.js解决办
- Django使用mysqlclient服务连接并写入数据库准备1.创建Django程序,安装Django服务(详情请看上上节)2.创建子应用
- 这篇文章主要介绍了Python遍历字典方式就实例详解,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友
- 本文介绍了解决Vue2.0自带浏览器里无法打开的原因（兼容处理），分享给大家，希望对大家有帮助Vue 之 android内嵌H5页面不显示出
- 1、导入第三方库import urllib.request,urllib.error #请求网页from bs4 import
- 本文实例讲述了Python队列RabbitMQ 使用方法。分享给大家供大家参考，具体如下：目前的exchange的路由策略是：每个需要队列的
