CSS当中唯一的难点!!!

用一句话解释：相对定位是以自己为参照物，相对于自己定位。

绝对定位是以其他的东西，比如说父级元素，html定位。

----------------------------------------------------------------------------------------------------------------------------

Css 详细解读定位属性 position 以及参数

主要参数：

absolute

生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。 元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。

fixed

生成绝对定位的元素，相对于浏览器窗口进行定位。 元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。

relative

生成相对定位的元素，相对于其正常位置进行定位。 因此，"left:20" 会向元素的 LEFT 位置添加 20 像素。 static 默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。

inherit

规定应该从父元素继承 position 属性的值。

static

默认值，就是没有定位，那就没必要多解释了。inherit 继承父元素，基本上这个参数用得相当少，所以也不做过多的解释。

--------------------------------------展开讲------------------------------------------------

position:relative 相对定位

相对自己文档流中的原始位置定位。（不会脱离文档流）

使用position:relative定位，其元素依旧在文档流中，它的位置可以使用 left、right、top、bottom、z-index等定位参数。

position:fixed 相对浏览器定位

它相对于浏览器的窗口进行定位（它会脱离文档流）

position:absolute 绝对定位

生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。

position 以及参数总结

1.position: relative;不会脱离文档流，position: fixed;position: absolute;会脱离文档流

2.position: relative;相对于自己在文档流中的初始位置偏移定位。

3.position: fixed;相对于浏览器窗口定位。

4.position: absolute; 是相对于父级非position:static 浏览器定位。

(1)如果没有任何一个父级元素是非position:static属性，则会相对于文档定位。

(2)这里它的父级元素是包含爷爷级元素、祖爷爷级元素、祖宗十八代级元素的。任意一级都可以。

(3)如果它的父级元素和爷爷级元素都是非position:static 属性，则，它会选择距离最近的父元素。

// 学到这，我必须激励下，自己，所谓千夫所指的困难，都只是为了筛选掉懦夫而已。//

用一些通俗语言解释：

1.绝对定位找到所限制范围内的相对位置，而相对定位是相对自身做位移。
relative无侵入;
绝对定位里是拉伸，相对定位是斗争（就top和bottom，left和right）

2.relative无侵入作用，即他不会影响其他元素的布局，比如说：如果是margin-top：-100px；移走后，紧接着这个div的div也会向上移动；如果是top:-100px，则不会，后面的元素会保持不动

3.relative：
（1）提高层叠上下文：如果有两张图片层叠在一起，像让下面的图片放到上面来，就可以设置下面的图片的position为relative
（2）新建层叠上下文与层级控制：如果子元素设置了absolute，z-index：4；父元素设置了relative，z-index：1；另外一个子元素设置了absolute，z-index：2；父元素设置了relative，z-index：3；则结果会使后者显示在上面

（3）父元素的z-index：auto是不会限制内部absolute元素层叠问题，不包括IE6/IE7

（4）relative的最小化影响原则：尽量降低relative属性对其他元素或布局的潜在影响
 尽量避免使用relative
 relative最小化：将要设置的元素独立成一个div，将这个div设置成relative，要设置的元素为absolute

---------------------------------------补充-------------------------------------------------

补充添加两个属性：z-index和overflow

z-index

百度百科：

z-index是针对网页显示中的一个特殊属性。因为显示器是显示的图案是一个二维平面，拥有x轴和y轴来表示位置属性。为了表示三维立体的概念如显示元素的上下层的叠加顺序引入了z-index属性来表示z轴的区别。表示一个元素在叠加顺序上的上下立体关系。