CSS2.0 HandBook上的解释：
设置此属性值为 absolute 会将对象拖离出正常的文档流绝对定位而不考虑它周围内容的布局。假如其他具有不同 z-index 属性的对象已经占据了给定的位置，他们之间不会相互影响，而会在同一位置层叠。此时对象不具有外补丁( margin )，但仍有内补丁( padding )和边框( border )。
要激活对象的绝对(absolute)定位，必须指定 left ， right ， top ， bottom 属性中的至少一个，并且设置此属性值为 absolute 。否则上述属性会使用他们的默认值 auto ，这将导致对象遵从正常的HTML布局规则，在前一个对象之后立即被呈递。
TRBL属性（TOP、RIGHT、BOTTOM、LEFT）只有当设定了position属性才有效。
当设定position:absolute
如果父级（无限）没有设定position属性，那么当前的absolute则结合TRBL属性以浏览器左上角为原始点进行定位
如果父级（无限）设定position属性，那么当前的absolute则结合TRBL属性以父级（最近）的左上角为原始点进行定位。
当设定position: relative
则参照父级（最近）的内容区的左上角为原始点结合TRBL属性进行定位（或者说相对于被定位元素在父级内容区中的上一个元素进行偏移），无父级则以BODY的左上角为原始点。相对定位是不能层叠的。在使用相对定位时，无论元素是否进行移动，元素依然占据原来的空间。因此，移动元素会导致它覆盖其他框。
一般来讲，网页居中的话用Absolute就容易出错，因为网页一直是随着分辨率的大小自动适应的，而Absolute则会以浏览器的左上角为原始点，不会应为分辨率的变化而变化位置。有时还需要依靠z-index来设定容器的上下关系，数值越大越在最上面，数值范围是自然数。当然有一点要注意，父子关系是无法用z-index来设定上下关系的，一定是子级在上父级在下。
设置此属性值为 relative 会保持对象在正常的HTML流中，但是它的位置可以根据它的前一个对象进行偏移。在相对(relative)定位对象之后的文本或对象占有他们自己的空间而不会覆盖被定位对象的自然空间。与此不同的，在绝对(absolute)定位对象之后的文本或对象在被定位对象被拖离正常文档流之前会占有它的自然空间。放置绝对(absolute)定位对象在可视区域之外会导致滚动条出现。而放置相对(relative)定位对象在可视区域之外，滚动条不会出现。其实对于定位的主要问题是要记住每个定位的意义。相对定位是“相对于“元素在文档流中初始位置的，而绝对定位是”相对于“最近的已经定位的祖先元素。
本文来自: 脚本之家(www.jb51.net) 详细出处参考：http://www.jb51.net/article/16461.htm
分享到：
相关推荐
本文将详尽地探讨`position`属性中的`relative`和`absolute`值，以及它们在网页设计中的应用。 首先，`position`属性的默认值是`static`，这意味着元素遵循正常的文档流，即按顺序从上到下、从左到右排列。但当我们...
关于 position、absolute、relative 层叠加的技巧 Position 属性是 CSS 中的一种布局方式，用于控制元素在文档中的位置。Position 属性有五个值：static、relative、absolute、fixed 和 inherit。其中，static 是...
`position`属性有多个可选值，其中`absolute`和`relative`是两个最常使用的值，它们在网页设计中扮演着关键角色。 **一、position: static** 这是所有元素的默认定位方式。`static`定位遵循正常的文档流，即元素会...
然而，需要注意的是，`position:relative`可能会改变元素的大小计算方式，尤其是在与`absolute`或`fixed`定位的子元素一起使用时。如果父元素设置了`position:relative`，并且有绝对定位的子元素，那么子元素的定位...
总结来说，position: absolute和position: relative是CSS中用于控制元素定位的两个重要属性。absolute让元素完全脱离文档流并相对于最近的已定位祖先元素（或者初始包含块）进行定位，而relative则让元素保持在文档...
### Position:relative/absolute无法冲破的等级解析 #### 前言 在Web前端开发过程中，元素的定位机制是至关重要的。CSS提供了多种定位方式，包括`static`、`relative`、`absolute`、`fixed`和`sticky`。本文将深入...
在你的问题中，你特别关注了`position:relative;`的作用，这是一个基础且实用的定位方式。下面我会详细解释`position:relative;`以及与之相关的其他定位方式。 首先，我们来看`position`属性的四种主要值： 1. **...
CSS Position relative 和 absolute 的区别 在 CSS 中，position 属性 plays a crucial role 在排版元素中。在 position 属性中，有五个值：static、inherit、fixed、absolute 和 relative。今天，我们将深入探讨 ...
本文件主要探讨了`position`属性的两个关键值：`relative`和`absolute`，这些知识点对于创建复杂的网页布局至关重要。 首先，我们来了解`position: relative;`。这个值表示元素是相对定位的。当一个元素的`position...
`position`属性用于定义元素的定位模式，它有多种值，如`static`（默认值）、`relative`、`absolute`、`fixed`和`sticky`。当`position`设置为`relative`时，元素保持其正常流中的位置，但可以通过`top`和`left`等...
《CSS position属性详解：absolute, relative及其他值》 在网页设计中，CSS（层叠样式表）的position属性是至关重要的，它决定了元素在页面上的布局方式。position属性有五个基本值：static、relative、absolute、...
今天在写一个购物车里面选择发货地址的部分时，多个收货地址用到了UL标签，由于每个地址的后面有个“修改地址”的功能，而且位于li标签的右边，于是就用到了，position：absolute； right：10px；这样把“修改地址”...
`position`属性用于控制元素在页面上的定位方式，常见的值有`static`（默认值，不进行特殊定位）、`relative`（相对定位，相对于其正常位置）、`absolute`（绝对定位，相对于最近的非`static`定位的祖先元素）和`...
《Position属性之relative用法详解》 在网页布局设计中，CSS（层叠样式表）的position属性扮演着至关重要的角色。本文将深入探讨position属性中的relative用法，帮助开发者更好地理解和运用这一特性。 首先，我们...
`position`有四个可能的值：`static`、`fixed`、`absolute`和`relative`，其中`absolute`和`relative`是最常用的两种。 1. `relative`（相对定位）： - 当`position`设置为`relative`时，元素仍然遵循正常的文档流...