下载文档原格式
很多朋友问过我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来设定上下关系的，一定是子级在上父级在下。
Navigation Lectures导航讲座DCW绝对定位（Absolute positioning）：用一台 GNSS信号接收机直接测定一个测站在给定全球大地坐标系（例如 WGS-84世界大地坐标系）内的点位三维坐标；后者是相对于坐标原点的绝对坐标，故称之为“绝对定位”。
近年来，人们常将它称为“单点定位”（single point positioning）。
精度（Accuracy）：它表示一个量的观测值与其真值接近或一致的程度，常以其相应值——误差（Error）予以表述。
对 GNSS卫星导航而言，精度直观地概括为用GNSS信号所测定的载体在航点位与载体实际点位之差；对于 GNSS卫星测地而言，精度是用 GNSS信号所测定的地面点位与其实地点位之差。
捕获（Acquisition）：它是 GNSS信号接收机能够接收和锁定 GNSS信号的能力，这是获取 GNSS观测值的关键一步。
历书（Almanac）：它是一组由卫星导航电文提供的描述所有在轨 GNSS卫星概略位置及其钟差的参数。
每颗 GNSS卫星向用户发送历书数据，用户利用它们不仅能选择工作正常和位置适当的卫星，以致它们能够构成较理想的空间几何图形，而且依据已知的码分地址能够较快地捕获到所选择的待测卫星。
模糊度（Ambiguity）：例如，当用 GPS第一载波测量时，其载频 fL1=1575.42 MHz，它的相应波长λ=19 cm，用该 19 cm电尺量测从 GPS信号接收机到 GPS卫星的二万余千米距离，其整尺段数（波数）约为1E+8。
如此巨大的波数是无法直接精确测定的，而需用一定的方法求解这个未知数，该未知数称为载波相位测量的模糊度，因为它是从接收机到卫星的载波相位测量的整周期数，在笔者所著的《GPS卫星导航定位原理与方法》和《全球导航卫星系统及其应用》两部著作中将它称为整周模糊度，它的解算是载波相位测量数据处理的一个特殊而又极重要的问题。
position的几种区别以position的几种区别为标题，写一篇文章。
一、绝对定位与相对定位的区别绝对定位与相对定位是常用的两种定位方式，在前端开发中经常会用到。
它们的主要区别如下：1. 定位参考点不同：绝对定位是相对于最近的已定位的祖先元素，如果没有已定位的祖先元素，则相对于最初的包含块；而相对定位是相对于元素在文档流中的位置进行定位。
2. 元素脱离文档流：绝对定位的元素脱离了文档流，不会占据原来的位置，其他元素会忽略该元素的存在；而相对定位的元素仍然占据原来的位置，其他元素不会受到影响。
3. 元素定位方式：绝对定位可以通过设置top、right、bottom和left属性来确定元素的位置；而相对定位可以通过设置top、right、bottom和left属性来对元素进行微调，但不会改变元素原来的位置。
二、静态定位与固定定位的区别静态定位和固定定位也是常用的两种定位方式，在前端开发中经常会用到。
它们的主要区别如下：1. 元素是否固定：静态定位是元素默认的定位方式，在文档流中按照其在HTML中的顺序进行排列；而固定定位是相对于浏览器窗口进行定位，不会随着页面滚动而改变位置。
2. 元素是否脱离文档流：静态定位的元素不会脱离文档流，会按照其在HTML中的顺序进行排列；而固定定位的元素脱离文档流，不会占据原来的位置。
3. 元素是否可滚动：静态定位的元素随着页面滚动而滚动；而固定定位的元素在页面滚动时保持固定的位置不变。
三、固定定位与浮动定位的区别固定定位和浮动定位也是常用的两种定位方式，在前端开发中经常会用到。
它们的主要区别如下：1. 元素定位方式：固定定位是相对于浏览器窗口进行定位，通过设置top、right、bottom和left属性来确定元素的位置；而浮动定位是相对于元素在文档流中的位置进行定位，通过设置float属性来决定元素的浮动方向。
2. 元素是否脱离文档流：固定定位的元素脱离文档流，不会占据原来的位置；而浮动定位的元素仍然占据原来的位置，但会影响其他元素的布局。
相对定位和绝对定位的区别与应用相对定位和绝对定位是前端开发中常用的两种定位方式，它们在网页布局和样式设计中起着重要的作用。
本文将深入探讨相对定位和绝对定位的区别与应用。
一、相对定位的特点与应用相对定位是相对于元素本身在正常文档流中的位置进行定位的。
通过设置元素的position属性为relative，可以使用top、right、bottom和left属性来调整元素的位置。
1. 相对定位的特点相对定位的元素仍然占据文档流中的空间，不会影响周围元素的位置。
它在原始位置的基础上进行微调，类似于微调器的作用。
相对定位的元素仍然遵循正常文档流的顺序，可以使用z-index属性进行层叠控制。
2. 相对定位的应用相对定位常用于微调元素的位置或对齐。
例如，在一个包含图片和文字的容器中，通过相对定位可以将文字相对于图片稍微上移一些，以保持整体视觉效果的平衡。
二、绝对定位的特点与应用绝对定位是相对于最近的具有定位属性（非static）的父元素进行定位的。
通过设置元素的position属性为absolute，可以使用top、right、bottom和left属性来精确地控制元素的位置。
1. 绝对定位的特点绝对定位的元素完全脱离了文档流，不占据空间，不影响周围元素的位置。
它将相对于最近的具有定位属性的父元素进行定位，如果没有找到匹配的父元素，则以文档的初始包含块为参考进行定位。
绝对定位的元素会覆盖在其他元素之上，可以使用z-index属性进行层叠控制。
2. 绝对定位的应用绝对定位常用于创建浮动效果、实现元素的悬浮、弹出框或对话框的定位等。
例如，在一个导航栏中，通过使用绝对定位，可以让下拉菜单在鼠标悬浮时以浮动的方式展开，并保持在合适的位置。
三、相对定位与绝对定位的区别相对定位和绝对定位都是用来调整元素位置的方法，但在使用上存在一些区别。
1. 定位参考点不同相对定位是相对于元素自身在文档流中的位置进行定位，而绝对定位是相对于最近的具有定位属性（非static）的父元素进行定位。
html定位的三种常用方式html定位是网页开发中非常重要的一部分，它决定了元素在网页中的位置和布局。
在本文中，我们将探讨html定位的三种常用方式，并详细介绍它们的特点和用法。
1. 相对定位（Relative Positioning）相对定位是html中最基本和最简单的定位方式之一。
它通过指定元素相对于其正常位置的偏移量来实现定位。
通过在元素的CSS样式中设置position属性为relative，我们可以使用top、right、bottom和left属性来调整元素的位置。
相对定位对元素的正常文档流没有影响，即元素仍然占据在文档中的原始位置。
元素的偏移量不会影响其他元素的位置。
这使得相对定位非常适合用于微调特定元素的位置。
2. 绝对定位（Absolute Positioning）绝对定位是一种更灵活和精确的定位方式。
与相对定位不同，绝对定位将元素从正常文档流中移除，并将其相对于最近的父元素或根元素进行定位。
要使用绝对定位，我们需要在元素的CSS样式中将position属性设置为absolute。
可以使用top、right、bottom和left属性来确定元素在网页中的精确位置。
绝对定位的一个重要特点是，元素的位置会受到其父元素定位属性的影响。
如果父元素没有设置定位属性或是使用默认的position值（static），那么元素会相对于根元素进行定位。
绝对定位非常适合用于创建自定义布局，如悬浮菜单、弹出窗口和轮播图等。
它可以让我们更加灵活地控制元素的位置和重叠关系。
3. 固定定位（Fixed Positioning）固定定位是一种特殊的定位方式，它使元素相对于浏览器窗口进行定位，而不是相对于其他元素或文档流。
固定定位可以使元素在浏览器窗口滚动时保持在固定的位置。
使用固定定位需要将元素的position属性设置为fixed，并使用top、right、bottom和left属性来指定元素在窗口中的位置。
概要：本文主要描述XHTML中相对定位和绝对定位各自的本质、用法、区别和两者之间的关系。
以及使用CSS的Left、Right、Top、Bottom属性（偏移属性）和Margin属性（外边距）对定位块级元素进行布局的方法。
(本文的示例，请看这个附件demo。
)说明：占位空间：元素在文档流中所占据的空间。
物理空间：元素本身所占据的空间。
下面分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效果图：图22.仅使用margin属性布局相对定位元素的情况用margin-bottom属性和margin-top属性设置负值可以改变文档流中所占空间的高度，会影响文档流中的其它元素位置。
例如：margin-top:负值; margin-bottom:负值图3中，box1和box2都设置了元素margin-bottom的值，值等于它们高度的负值。
box1和box2物理空间没有改变，占位空间高度为0。
box3的margin-bottom值设置为0，物理空间没有改变，占位空间高度不变。
再通过margin-left对box2和box3设置左偏移值。
层级关系为：<div<div box1 ——– position:relative ; margin-bottom:-102px;<div box2 ——– position:relative ; margin-bottom:-102px; margin-left:110px;<div box3 ——– position:relative ; margin-bottom:0px; margin-left:220px;效果图：图33.混合使用left、right、top和bottom属性与margin属性布局相对定位元素的情况此情况，它们的值会产生累加的效果。
在CSS2.1中所有的浏览器都使用外边距边界来完成偏移计算。
本文从数学的角度理解为偏移属性值和外边距属性值累加。
图4中，box2是在图3的基础上增加设置left的值产生的效果，可见margin-left的值和left 的值产生了累加。
(偏移量:80px = 110px - 30px)层级关系为：<div<div box1 ——- position:relative ; margin-bottom:-102px;<div box2 ——- position:relative ; margin-bottom:-102px;margin-left:110px; flet:-30px; <div box3 ——- position:relative ; margin-bottom:0px; margin-left:220px;效果图：图4二、用绝对定位布局块级元素设置position值：position:absolute;此属性值的设置，元素从文档流完全删除。
1.仅使用left、right、top和bottom属性布局绝对定位元素的情况绝对定位的元素的偏移位置以最近的定位(包括相对定位和绝对定位)祖先元素作参照物。
如果元素没有已定位(包括相对定位和绝对定位)的祖先元素，那么它的参照物为最顶级元素（由于浏览器的默认参照物不同，物可能是BODY或HTML 元素）。
注意：IE下参照物需设置宽度或高度bottom和right属性才可以正确的定位。
设置元素为绝对定位元素后，元素的Left、Right、Top和Bottom属性默认值不是0，只是将元素脱离文档流。
以下例子说明这个问题。
在图5中，将橘黄色的祖先元素设置为定位元素（即参照物），box2设为绝对定位，文档流由box1-box2-box3变为box1-box3，可box2却没有移动到距离参照物0值的位置上，可见box2的Left、Right、Top和Bottom属性默认值不等于0，它只是脱离了文档流而已。
层级关系为：<div ———————————position:relative 参照物<div—————————-没有设置为定位元素，不是参照物<div———————-没有设置为定位元素，不是参照物<div box1<div box2 ——–absolute<div box3效果图：图5以最近的祖先定位元素为参照物的情况图6中，Box2设置成绝对定位元素，脱离了文档流，文档流由box1-box2-box3变为box1-box3，box2以最近的定位祖先（蓝色框）为参照物。
层级关系为：<div ——————————— position:relative; 不是最近的祖先定位元素，不是参照物<div—————————-没有设置为定位元素，不是参照物<div———————- position:relative 参照物<div box1<div box2 ——–position:absolute; top:50px; left:120px;<div box3效果图：图6图7中，为改变参照物（橘色框）后的效果层级关系为：<div ——————————— position:relative;最近的祖先定位元素，参照物 <div—————————-没有设置为定位元素，不是参照物<div———————-没有设置为定位元素，不是参照物<div box1<div box2 ——–position:absolute; top:50px; left:120px;<div box3效果图：图7图8中，参照物为最顶级的元素情况。
层级关系为：<div ———————————没有设置为定位元素，不是参照物 <div—————————-没有设置为定位元素，不是参照物<div———————-没有设置为定位元素，不是参照物<div box1<div box2 ——–position:absolute; top:50px; left:120px;<div box3效果图：图82.仅使用margin属性布局绝对定位元素的情况此情况，margin-bottom 和margin-right的值不再对文档流中的元素产生影响，因为该元素已经脱离了文档流。
另外，不管它的祖先元素有没有定位，都是以文档流中原来所在的位置上偏移参照物。
图9中，使用margin属性布局相对定位元素。
层级关系为：<div ——————————— position:relative; 不是参照物<div—————————-没有设置为定位元素，不是参照物<div———————-没有设置为定位元素，不是参照物<div box1<div box2 ——–position:absolute; margin-top:50px; margin-left:120px;<div box3效果图：图9IE6的情况下，box2前面没有兄弟节点，则margin-left的值会出现双倍边距，见图10。
层级关系为：<div ——————————— position:relative; 不是参照物<div—————————-没有设置为定位元素，不是参照物<div———————-没有设置为定位元素，不是参照物<div box1<div box2 ——–position:absolute; margin-top:50px; margin-left:60px;<div box3效果图：图103.混合使用left、right、top和bottom属性与margin属性布局相对定位元素的情况a.margin属性和top、bottom、left、right属性同时使用，如果同一方向偏移，它们的值会产生累加的效果，见图11。
例如：margin-left:120px; left:-20px; 那么box2的偏移值为120px-20px=100px;层级关系为：<div ———————————-不是参照物<div—————————–不是参照物<div———————–position:relative; 参照物<div box1<div box2 ———position:absolute; margin-left:120px; left:-20px; top:50px;<div box3效果图：图11b.绝对定位和相对定位的累加加效果不同，如果top、bottom、left、right属性和margin属性偏移的方向相反，top、bottom、left、right属性值有效，反方向的margin属性值无效，见图12。
层级关系为：<div ———————————-不是参照物<div—————————–不是参照物<div———————–position:relative; 参照物<div box1<div box2 ———position:absolute; margin-left:120px; right:10px; top:50px;<div box3效果图：图12总结：∙相对定位的元素不会脱离文档流，占用文档流的空间，Left; Right; Top和Bottom 属性与margin属性混合使用会产生累加效果。
∙绝对定位的元素脱离文档流，偏移不影响文档流中的其它元素，Left; Right; Top和Bottom属性与margin属性混合使用，偏移方向相同值累加，方向相反，margin属性值无效。
