CSS绝对定位和相对定位

前言：

一直觉得位置放的对就行了，放不对的top bottom和left right乱调，调对了却不知道为什么那块会在那里,面试吃大亏。

1、 概念

绝对定位：

元素会**脱离文档流**，如果设置偏移量，会**影响其他元素的位置定位**； 相对于最近的，已进行定位(绝对、相对等)的祖先元素进行定位如果没有（没有父元素或者没有已定位的父元素），则相对于最初的包含块进行定位（即body/html）。

相对定位：

相对于**原来位置**移动，元素设置此属性之后仍然处在文档流中，**不影响其他元素的布局**，但移动元素会导致它**覆盖**其它框；相对定位是相对于元素在文档中的初始位置。

2、 例子

不难理解，首先b1 b2 b3（从上到下）三个div原始的样子：

给b3加上相对定位，即相对原来的位置，top:-50px:那么应该覆盖b2的一半：

给b2加一个绝对定位，没有偏移，使b2脱离文档流后，此时b3一个覆盖b1的一半（b2此时位置仍是默认，紧挨着b1下面）

然后给b2设置top:0;给b1设置一个定位；但b1不是b2的父元素，所以b2会相对body进行 top:0； 的操作

再把b1设置成b2的父元素，b2设置 top:50px; 则此时b2的顶部应该相距b1顶部50px

3、 总结

相对定位：

**相对于“元素原来的位置”**，原来的位置即什么定位都不加，元素原本的位置，大概位置不如，div这种block元素，都是一个div占据一行，多个div则一段一段排下去，就知道大概的位置；

绝对定位：

首先看父元素，如果父元素已有定位，那么就是**相对于父元素**的定位；没有父元素或者父元素没有定位，则**相对有整个浏览器窗口**（body）进行定位。

4、 常用

子绝父相

如果要对一个子元素使用定位，那么应该是子元素是绝对定位，它的父元素为相对定位。让子元素 以其父元素为标准来定位。 如果不这么做，子元素就会相对body或浏览器定位产生不好的效果。