绝对定位和相对定位

前端中经常需要用到定位的方法对页面进行布局，有绝对定位、相对定位、固定定位和静态定位。这里主要回顾一下绝对定位和相对定位的区别及用法。
首先是相对定位：

1. 元素相对于原来的位置在进行位置偏移

2. 元素移动以后，依然还占用之前的位置

3. 经过相对定位的元素，它相对于屏幕会向上提高一个等级

4. 相对定位没有脱离文档流

5. 相对定位的块级元素可以使用margin:auto居中(它没有脱离文档流)

   .div1{
   position:relative;
   top:-20px;
   }

说明：元素向上偏移20个像素，并且保留之前的位置

然后是绝对定位：

1. 绝对定位默认是以浏览器在进行定位，例如left:20px指的就是距离浏览器左边20px
2. 当一个元素进行绝对定位以后，如果它的外层元素里面的任何一层有相对定位，这个时候，他就会以这一层的元素为标准开始定位（子绝父相）
3. 绝对定位不占用原来的位置
4. 绝对定位会脱离当前的文档流
5. 一个元素进行绝对定位以后，如果它是块级元素，那么它的宽度就不再是默认的100%，而是由里面的内容进行撑开，但是，这个时候我们可以通过width与height来设置它的宽度与高度（它只是改变了元素的宽度，并没有改变元素的性质：也就是没有把元素由块级元素转行内元素）
6. 如果一个元素使用了绝对定位，那么就不能够使用margin:auto进行居中
7. 绝对定位的元素会随着浏览器滚动条的拖动而滚动

所谓的“子绝父相”指的是当子级元素使用绝对定位以后，父级元素要使用相对定位来拦住下来的绝对定位。

“子绝父相”里面，父级元素不一定要使用相对定位才行，除了static以外的任何定位，我们都可以拦下绝对定位