白驹过隙,这篇文章距今已有一年以上的历史。技术发展日新月异,文中的观点或代码很可能过时或失效,请自行甄别:)

对position这个属性一直是一知半解,知道有4个属性static,fixed,relative,absolute,然而对后两个一直概念不清.查了下资料,总算弄明白,记录下.

static

所有的元素默认position都是这个,元素的位置基于文档流,不解释.

fixed

当元素设置了这个的时候,基于body定位

relative

顾名思义,relative指相对位置,这里的相对位置是指的自身元素本来该属于的文档流位置.如果设置了border,margin,padding等值,relative的位置是基于自己margin的左上角开始定位,想跳出原本的文档流,随后的子兄弟会移上前去占据原本该元素的文档流位置

absolute

绝对定位,这里的绝对,应该是绝对谁?

分为两种情况:

  1. 先基于第一个postion设置为非static的父级元素padding的左上角开始位置来定位,如果找到了,遵序此规则
  2. 如果根据规则1最后也没找到相关元素基于body来进行定位