一文彻底理解position定位问题，让新手彻底不迷糊

3.4 定位(重点)

CSS布局核心是position属性，对元素盒子应用这个属性，可以相对于它在常规文档流中的位置重新定位。

position属性有4个值：static,relative,absolute,fixed.

3.4.1 静态定位

在静态定位情况下，每个元素处在常规文档流中，他们都是块级元素。

3.4.2 相对定位

我们将第三段的position设置为relative,相对于上25px,左30px.

#specialpara {
    position: relative;
    top: 25px;
    left: 30px;
}

它从包含的元素中挣脱出来了，一了一部分，这个元素原来占据的控件没有动。

3.4.3 绝对定位

和相对定位不一样，绝对定位会把元素彻底从文档流中拿出来。

修改上面的例子为绝对定位。

可以看出之前占据的空间被回收了，说明绝对定位的元素完全脱离了常规文档流，现在是相对于顶级元素body定位，自然而然引出关于定位的重要概念：定位上下文。

绝对定位元素定位上下文是body,会随页面滚动而滚动。

3.4.4 固定定位

从完全移除文档流的角度说，固定定位于绝对定位类似。

不同的是，固定定位上下文是视口(浏览器窗口或手持设备屏幕)，因此不会随页面滚动而移动。

不常用，用的大多数是创建不随页面滚动而移动的导航元素。

案例，多增加段落，改为固定定位：

3.4.5 定位上下文

把元素的position 属性设定为relative、absolute 或fixed 后，继而可以使用top、right、bottom 和left 属性，相对于另一个元素移动该元素的位置。这里的“另一个元素”，就是该元素的定位上下文。

在讲绝对定位的时候，我们知道绝对定位元素默认的定位上下文是body。这是因为body 是标记中所有元素唯一的祖先元素。而实际上，绝对定位元素的任何祖先元素都可以成为它的定位上下文，只要你把相应祖先元素的position 设定为relative 即可。

只有将position属性设置为，relative,absolute,fixed，top等属性才生效。

内部position改为绝对路径， 没有相对定位的祖先，只能以默认定位上下文body作为参照物。

把外部div设置为相对定位，此时内部div的top和left参照就是外部了。

记住一句话：想要将父亲作为参照物，子绝父相。