CSS——在css position 定位 中， relative 和 absolute 的关系

relative：定位是相对于自身位置定位（设置偏移量的时候，会相对于自身所在的位置偏移）。设置了relative的元素仍然处在文档流中，元素的宽高不变，设置偏移量也不会影响其他元素的位置。最外层容器设置为relative定位，在没有设置宽度的情况下，宽度是整个浏览器的宽度。

absolute：定位是相对于离元素最近的设置了绝对或相对定位的父元素决定的，如果没有父元素设置绝对或相对定位，则元素相对于根元素即html元素定位。设置了absolute的元素脱了了文档流，元素在没有设置宽度的情况下，宽度由元素里面的内容决定。脱离后原来的位置相当于是空的，下面的元素会来占据位置。

1、相对定位（position：relative）

 得出结论：

1、红色盒子是相对于盒子最初的位置向左偏移200px，向下偏移50px；

2、盒子偏移后也不会影响其他盒子；偏移后最初的位置会留下一个占位的。

 

 

2、绝对定位（position：absolute）

结论：1、绝对定位的盒子，最初的位置不会再占用，后面的盒子会填上空缺；

2、在父元素（也就是大盒子box）没有position属性时，子元素（红色盒子）是以屏幕为参照物进行位置的定位的；

 

3、如果父元素有position属性时；他就会以父元素为参照物进行偏移；当然如果父元素没有position这个属性，他就会一级一级往上找，

绝对定位相对于的位置偏移是发生在上层元素上是否有position这个属性，如果没找到，就相对于整个屏幕。

补充说明：Z-index可以设置层叠的置（绝对定位和相对定位都可以用），越大越在上层。（例如：z-index：1000；）