Question

div的相对定位和绝对定位是什么意思,什么区别啊?

有位老兄说学习div+css的div布局必须学会相对定位和绝对定位

小弟初学不是很懂``请问什么是相对定位和绝对定位啊?有什么区别?
最好有解释的例子```
谢谢两位大哥``还是没怎么懂```

Answer 1

相对定位和绝对定位是定位的两种表现形式，区别如下：

一、主体不同

1、相对定位：是设置为相对定位的元素框会偏移某个距离。

2、绝对定位：absolute 脱离文档流，通过 top,bottom,left,right 定位。

二、特点不同

1、相对定位：在使用相对定位时，无论是否进行移动，元素仍然占据原来的空间。因此，移动元素会导致它覆盖其它框。

2、绝对定位：选取其最近的父级定位元素，当父级 position 为 static 时，absolute元素将以body坐标原点进行定位，可以通过z-index进行层次分级。

三、表现方式不同

1、相对定位：对一个元素进行相对定位，它将出现在它所在的位置上。可以通过设置垂直或水平位置，让这个元素“相对于”它的起点进行移动。

2、绝对定位：文本流中的内容会顶替绝对定位元素的位置，而绝对定位元素自然的层叠于文本流之上。而在单一的绝对定位中，定位元素将会跑到网页的左上角，因为那里是被绝对定位后的坐标原点。

参考资料来源：百度百科-CSS相对定位

参考资料来源：百度百科-绝对定位

Answer 2

相对定位就是相对于自己应该在的位置的定位,比如left:1px的时候就是相对于正常位置右移了1个像素,而绝对定位是相对于留言器窗口的定位,left:1px就是在浏览器窗口距离左边1像素的位置

http://www.w3school.com.cn/css/css_positioning_relative.asp
这个教程应该比较清楚了

Answer 3

相对定位指的是相对于上一层的div来说的，所有的距离都是相对于本div的外层div。而绝对定位指的是任何时候都是以页面的边来定位的

Answer 4

<div class="fatherBox">
<div class="sonBox"></div>
</div>
---------------------
<style>
.fatherBox { position: relative; width: 600px; height: 400px; background: #000; }
.sonBox { position: absolute; left: 20px; top: 20px; width: 100px; height: 100px; background: #fff; }
</style>
---------------------
解释一下：
父层fatherBox设为相对定位，子层sonBox设为绝对定位，相对于父层来说，它在距左20px距上20px的位置显示，过于详细的解释网上搜得到，楼主实践一下就懂了．

Answer 5

文档流 也有人叫普通流、正常流，指语言文本 从左到右，从上到下显示，是传统HTML文档的 文本布局。浮动(float)、绝对定位(absolute)、固定定位(fixed)三种方式 会脱离文档流。