css中absolute与relative的区别
作者:小毅 来源:毅博客 发布时间:2007-11-17 08:04:00
很多朋友问过我absolute与relative怎么区分,怎么用?我们都知道absolute是绝对定位,relative是相对定位,但是这个绝对与相对是什么意思呢?绝对是什么地方的绝对,相对又是相对于什么地方而言的呢?那他们又有什么样的特性,可以做出什么样的效果呢?关于两者之间又有什么样的技巧呢?下面我们就来一一解读。
Absolute,CSS中的写法是:position:absolute; 他的意思是绝对定位,他是参照浏览器的左上角,配合TOP、RIGHT、BOTTOM、LEFT(下面简称TRBL)进行定位,在没有设定TRBL,默认依据父级的做标原始点为原始点。如果设定TRBL并且父级没有设定position属性,那么当前的absolute则以浏览器左上角为原始点进行定位,位置将由TRBL决定。
一般来讲,网页居中的话用Absolute就容易出错,因为网页一直是随着分辨率的大小自动适应的,而Absolute则会以浏览器的左上角为原始点,不会应为分辨率的变化而变化位置。很多人出错就在于这点上出错。而网页居左其特性与Relative很相似,但是还是有本质的区别的。
Relative,CSS中的写法是:position:relative; 他的意思是绝对相对定位,他是参照父级的原始点为原始点,无父级则以BODY的原始点为原始点,配合TRBL进行定位,当父级内有padding等CSS属性时,当前级的原始点则参照父级内容区的原始点进行定位。
有时我们还需要依靠z-index来设定容器的上下关系,数值越大越在最上面,数值范围是自然数。当然有一点要注意,父子关系是无法用z-index来设定上下关系的,一定是子级在上父级在下。
猜你喜欢
- 国外纷纷传言IE8将是Internet Explorer的最后一个版本,这个猜测来源于Microsoft的CEO Steve
- 解决Microsoft VBScript 运行时错误 (0x800A0046) 没有权限的解决方案,0x800a0046错误。前段时间在做站
- 关于mysql数据库在Linux下的应用一直以来都是我认为比较棘手的,这次通过搭建Linux学习环境顺便研究和学习Mysql数据库在Linu
- XHTML规范中有一条标准就是“每个XHTML标签都有一个结束标记”。那么对于HTML中原来不带结束标记的元素,则在该结束前加上“/”来关闭
- sql server中变量要先申明后赋值:局部变量用一个@标识,全局变量用两个@(常用的全局变量一般都是已经定义好的);申明局部变量语法:d
- Oracle 数据库启动Oracle shutdown的时候突然断电,导致使用sql/plus启动时无法连接到数据库,具体描述为: conn
- 应该是很方便的了,支持几乎所有主流浏览器(ie5,6,7,8;ff;傲游;Opera)已更新至可提交录入内容<script type=
- 一直以来,每次调用Ajax方法都需要创建一次 Microsoft.XMLHTTP 对象,今天在使用Ajax技术做一个类似聊天室的
- 模糊数据库指能够处理模糊数据的数据库。一般的数据库都是以二直逻辑和精确的数据工具为基础的,不能表示许多模糊不清的事情。随着模糊数学理论体系的
- 如何让我的网页自动适应客户端的屏幕分辨率?然后用下列办法进行自动推送:<% @language="vbscript
- DATE_FORMA T(date, format) 根据格式串format 格式化日期或日期和时间值date,返回结果串。可用DATE_F
- 今天摸了半天摸出来的,虽然这里没啥人玩ASP,不过也是win7的问题,发发当备份问题1.An error occurre
- 惊现!表面下的隐藏信息——浅谈信息可视化1910年,病卧床上的魏格那(德国气象学家,以“大陆漂移学说”闻名),无意地注视着墙上的世界地图……
- Web技术的发展速度太快了,如果你不与时俱进,就会被淘汰。因此,为了应对即将到来的HTML5,本文总结了22个HTML5的初级技巧,希望能对
- 校验是否全由数字组成function isDigit(s) { var patrn=/^[0-9]{1,20}$/; if (!patrn.
- “重构”的春风吹遍大江南北,互联网一时间风声鹤唳,“div+CSS”俨然已成为一种“时尚”,难以尽数的网站都不约而同地开始了自己的“重构”。
- 大家觉得在接手遗留代码时,见到什么东东是最让人感到不耐烦的?复杂无比的 UML ?我觉得不是。我的答案是,超过两个 else 的 if ,或
- <% dim week_ymd(8) '测出可以手动设定日期,比如this_ymd=#2008-04-1
- 这带来了很多好处,但是也要求学习一些新的概念、命令、使用和管理任务。所以在投入你的生产系统之前,看看它解决什么、管理什么,以及对它的正反面评
- 本文只讨论Oracle中最常见的索引,即是B-tree索引。本文中涉及的数据库版本是Oracle8i。 一. 查看系统表中的用户索引 在Or