我是这样记忆position的

为了不让自己每次遇到position就头痛万分，我临时编了一个小故事，强行让自己记住了它...

 

这个世界上，什么人都有……

 

有一个名叫static（静止的），与世隔绝，日复一日，仿佛生活在静止的世界里，不被任何事物（通过"left", "top", "right" 以及 "bottom" 属性设置）改变，有他无他皆可（默认值，大概沉默的人总是首当其冲吧）。

 

另有一个名叫fixed（固定的），为人固执，无条件坚持己见（通过 "left", "top", "right" 以及 "bottom" 属性进行了规定），不被周遭影响，众人皆醉我独醒（相对于视窗来定位，即便页面滚动，仍是停留在相同的位置）。

 

还有一个名叫relative（相对的），相对其他几个来说正常点，是个老实人，一个人的时候默默无闻，回到生活中也会乖乖听话，从不抗拒从自己的位置挪到被安排好的地方。（表现得和 static 一样，除非添加了一些额外的属性。位置通过 "left", "top", "right" 以及 "bottom" 属性设定）

 

最后有一个名叫absolute（绝对的），他是一个绝对极端的人。所以上帝，哦不，是善良的程序员派了两个还算靠谱的人看住他，分别是 relative ，以及跟他一样也是极端（只是指望可以互相感化）的 absolute 。所以他只能固定活动在他们两个的地盘上，但是万一这两人都不在，那只能交还给社会（body）来看住他了，极端的人是需要被看住的，虽然他们很可怜！

（ 解释：absolute 与 fixed 的表现类似，但是它不是相对于视窗而是相对于最近的 “positioned”祖先元素。如果绝对定位（position属性的值为absolute）的元素没有 “positioned” 祖先元素，那么它是相对于文档的 body 元素，并且它会随着页面滚动而移动。）

 

参考：position