CSS相对定位&绝对定位

CSS相对定位&绝对定位

一、相对定位（relative）
相对定位是指 —— 该元素相对于原来的位置偏移，宽高都没变，撑大了容器。

特别的：
（1）元素偏移之后仍处在文档流中，不影响其他元素的布局。
（2）元素仍然保持其未定位前的形状，它原本所占的空间仍保留。
（3）最外层容器设置为relative定位，在未设宽度的情况下，宽度是整个浏览器的宽度。

举例： 对两个div块设置相对定位和绝对定位，看看有什么不同

		没有设置定位的代码如下

再给box1设置相对定位，让他相对于自己原来的位置：“上偏移50px，左偏移50px”

对比页面效果如下：

对比前后效果图，发现div1相对自己原来的位置发生了偏移（相对上边偏移50px，相对左边偏移50px），而且偏移以后，它依然占据原来的位置，原本的空间仍保留；后面的元素不会填补，若有重叠则叠在其他文档流元素之上，相对定位不会把其他元素挤掉。

二、绝对定位（absolute）
绝对定位是指 —— 该元素相对它的父元素偏移一定距离， 而且这个父元素必须设置了position属性。如果父元素没有position属性，则从最近的父元素开始找，直到找到body为止。

特别的：
（1）元素会脱离文档流，脱离后原来位置相当于是空的，下面的元素会占据位置。
（2）如果设置偏移量，会影响其他元素的位置定位。
（3）绝对定位使元素的位置与文档流无关，因此不占据空间。
（4）没有定义宽度的情况下，宽度由元素里的内容决定，效果和用float方法一样。

再给box1设置绝对定位，让他相对于自己原来的位置：“上偏移50px，左偏移50px”

对比页面效果如下：

总结：

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

（2）绝对定位本身与文档流无关，因此不占空间，普通文档流中的元素的布局就当绝对定位的元素不存在时一样，所以它们可以覆盖页面上其他的元素;
（可以通过z-index属性控制元素层的显示顺序）

（3）绝对定位相对于它最近的已定位的祖先元素，如果元素没有已定位的祖先元素，那么则相对于最初的包含块（body）;

（4）相对定位相对于元素自己原来的位置 。