position:relative; （相对定位）
相对定位元素遵循的是流动布局模型，存在于正常的文档流中，但是它的位置可以根据原位置进行偏移。
相对定位的特点：
1、相对于元素在文档流中位置进行偏移，但保留原占位。相对定位元素占有自己的空间（即元素的原始位置保留不变），因此即使元素相对定位后，相对定位的元素也不会挤占其他元素的位置，但可以覆盖在其他元素之上进行显示。（注意：不同浏览器在处理相对定位元素覆盖其他元素时是存在分歧的。）
2、与绝对定位不同的是，相对定位元素的偏移量是根据它在正常文档流里的原始位置计算的。
3、即使将元素相对定位的在浏览器的可视区域之外，浏览器窗口不会出现滚动条（不过在firefox、opera和safari中滚动条该出现还是会出现）。
在本文流中，任何一个元素都被文本流所限制了自身的位置，但是通过CSS我们依然使得这些元素可以改变自己的位置，我们可以通过float来让元素浮动，我们也可以通过margin来让元素产生位置移动。但是事实上那并非是真实的位移，因为，那只是通过加大margin值来实现的障眼法。而真正意义上的位移是通过top,right,bottom,left（下称TRBL，TRBL可以折分使用。）针对一个相对定位的元素所产生的。我们看下面的图：
我们看图中是一个宽度为200px，高度为50px，margin:25px; border:25px solid #333; padding:25px; 相对定位的元素，并且位移距上50px，距左50px。而下方是一块默认定位的黑色区块。我们看到这个处在文本流的区块被上面的相对定位挡住了一部分，这说明：“当元素被设置相对定位或是绝对定位后，将自动产生层叠，他们的层叠级别自然的高于文本流”。除非设置其z-index值为负值，但是在 Firefox等浏览器中z-index为负值时将不会显示。并且我们发现当相对定位元素进行位移后，表现内容已经脱离了文本流，只是在本文流中还为原来的相对对定位留下了原有的总宽与总高（内容的高度或是宽度加上margin\border\padding的数值）。这说明在相对定位中，虽然表现区脱离了原来的文本流，但是在文本流中还还有此相对定位的老窩。这点要特别注意，因为在实际应用中如果相对定位的位移数值过大，那么原有的区域就会形成一块空白。
并且我们注意，定位元素的坐标点是在margin值的左上边缘点，即图中的B点。那么所有的位移的计算将以这个点为基础进行元素的推动。当TRBL为正值时位移的方向是内聚的。由此可推，当TRBL为负值时位移的方向是外放的。在图片中有位移的箭头指向标识，带有加号的是正值位移方向，带有减号的是负值位移方向。关于位移方位，可以延伸阅读怿飞的《由浅入深漫谈margin属性（一）》
position:absolute; （绝对定位）
将元素从文档流中拖出来，然后使用 left、right、top、bottom 属性相对于其最近的一个具有定位属性（position: absolute | fixed | relative）的父包含容器进行绝对定位。如果不存在这样的包含容器，则相对于网页的 body 元素（即根据浏览器窗口）进行绝对定位。
绝对定位的特点：
1、一个绝对定位元素将为它包含的任何元素建立一个包含容器，被包含元素遵循普通文档规则，在包含容器中自然流动，但是他们的偏移位置由包含容器来确定。
2、绝对定位元素甚至可以包含其他绝对定位的子元素，这些绝对定位的子元素同样可以从父包含容器内脱离出来。这些子包含容器通过定位取负值或设置较大的片一直跑到父包含容器的外面。
3、绝对定位元素包含容器的定义与其他元素有一点不同。绝对定位元素的包含容器是由距离它最近的、且被定位的父级元素，即在它外面且最接近它的 position 属性值为 absolute、relative 或 fixed 的父级元素（具体要依赖于不同的浏览器）。如果不存在这样的父级元素，那么默认包含容器就是浏览器窗口（body 元素）本身。
4、绝对定位元素完全被拖离正常文档流中原来的空间，且原来空间将被不再被保留，原空间将被相邻的元素所挤占。
5、将绝对定位元素设置在浏览器的可视区域之外，浏览器窗口会出现滚动条。
相对定位只可以在文本流中进行位置的上下左右的移动，同样存在一定的局限性，虽然他的表现区脱离了文本流，但是在文本流却依然为其保留了一席之地，这就好比一个打工的人他到了外地，但是在老家依然有一个专属于他的位置，这个位置不随他的移动而改变。但是这样很明显就会空出一块空白来，如果希望文本流抛弃这个部分就需要用到绝对定位。绝对定位不光脱离了文本流，而且在文本流中也不会给这个绝对定位元素留下专属空位。这就好比是一个工厂里的职位，如果有一个工人走了自然会要有别的工人来填充这个位置。而移动出去的部分自然也就成为了自由体。绝对定位将可以通过TRBL来设置元素，使之处在任何一个位置。在父层position属性为默认值时，TRBL的坐标原点以body的坐标原点为起始。看下图：
上图可知，文本流中的内容会顶替绝对定位无素的位置，一点都不会客气。而绝对定位元素自然的层叠于文本流之上。而在单一的绝对定位中，定位元素将会跑到网页的左上角，因为那里是他们的被绝对定位后的坐标原点。
被关联的绝对定位
上面说的是单一的绝对定位，而在实际的应用中我们常常会需要用到一种特别的形式。即希望定位元素要有绝对定位的特性，但是又希望绝对定位的坐标原点可以固定在网页中的某一个点，当这个点被移动时绝对位定元素能保证相对于这个原坐标的相对位置。也就是说需要这个绝对定位要跟着网页移动，而并且是因定在网页的某一个固定位置。通常当网页是居中形式的时候这种效果就会显得特别的重要。要实现这种效果基本方式就是为这个绝对定位的父级设置为相对定位或是绝对定位。那么绝对定位的坐标就会以父级为坐标起始点。
虽然是如此，但是这个坐标原点却并不是父级的坐标原点，这是一个很奇怪的坐标位置。我们看一下模型图示：
我们看到，这个图中父级为黑灰色区块，子级为青色区块。父级是相对定位，子级是绝对定位。子级设置了顶部位移50个像素，左倾位移50个像素。那么我们看，子级的坐标原点并不是从父级的坐标原点位移50个像素，而是从父级块的padding左上边缘点为坐标起始点（即A点）。而父级这里如果要产生位置移动，或是浏览器窗口大小有所变动都不会影响到这个绝对定位元素与父级的相对定位元素之间的位置关系。这个子级也不用调整数值。
这是一种很特别并且也是非常实用的应用方式。如果你之前对于定位的控制并不自如的话，相信看完对这里对定位的解释一定可以把定位使用得随心所欲。
Copyright © 2003- PowerEasy Yahu All Rights Reserved.
