CSS-定位2-绝对定位

1、绝对定位概述

设置为绝对定位的元素框从文档流完全删除，并相对于其包含块定位，包含块可能是文档中的另一个元素或者是初始包含块。元素原先在正常文档流中所占的空间会关闭，就好像该元素原来不存在一样。元素定位后生成一个块级框，而不论原来它在正常流中生成何种类型的框。
（1）从文档流中删除，原来占用的空间释放
（2）绝对定位的元素的位置相对于最近的已定位祖先元素，如果元素没有已定位的祖先元素，那么它的位置相对于最初的包含块。

2、效果演示

源代码

运行效果：
  因为wrap样式的div是相对布局，因此wrap是div2已定位的父元素。
  因为绝对定位从文档流中删除，因此绿色div3向上移动。

image.png

  如果wrap删除 ** position : relative;**样式，运行结果如下，因为div2的没有找到已定位的父元素，所以div相对最初包含块进行偏移。

image.png