咳咳,为了不让自己每次遇到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