##**The css position property takes 5 values.** ~~~ position: absolute position: relative position: fixed position: static position: inherit ~~~ absolute修饰的容器随着外包裹容器位置的变化而变化。 1. `absolute`元素脱离了文档结构。和`relative`不同，其他三个元素的位置重新排列了。只要元素会脱离文档结构，它就会产生破坏性，导致父元素坍塌。（此时你应该能立刻想起来，float元素也会脱离文档结构） 2. `absolute`元素具有“包裹性”。之前`<p>`的宽度是撑满整个屏幕的，而此时`<p>`的宽度刚好是内容的宽度。 3. `absolute`元素具有“跟随性”。虽然`absolute`元素脱离了文档结构，但是它的位置并没有发生变化，还是老老实实的呆在它原本的位置，因为我们此时没有设置`top、left`的值。 4. `absolute`元素会悬浮在页面上方，会遮挡住下方的页面内容。 当你想让两个元素的content在垂直方向(vertically)分隔时，既可以选择padding-top/bottom，也可以选择margin-top/bottom，再此Ruthless建议你尽量使用padding-top/bottom来达到你的目的，这是因为css中存在Collapsing margins(折叠的margins)的现象。 Collapsing margins: margins折叠现象只存在于临近或有从属关系的元素，垂直方向的margin中。