对position这个属性一直是一知半解,知道有4个属性static,fixed,relative,absolute,然而对后两个一直概念不清.查了下资料,总算弄明白,记录下.
static
所有的元素默认position都是这个,元素的位置基于文档流,不解释.
fixed
当元素设置了这个的时候,基于body定位
relative
顾名思义,relative指相对位置,这里的相对位置是指的自身元素本来该属于的文档流位置.如果设置了border,margin,padding等值,relative的位置是基于自己margin的左上角开始定位,想跳出原本的文档流,随后的子兄弟会移上前去占据原本该元素的文档流位置
absolute
绝对定位,这里的绝对,应该是绝对谁?
分为两种情况:
- 先基于第一个postion设置为
非static的父级元素的padding的左上角开始位置来定位,如果找到了,遵序此规则 - 如果根据规则1最后也没找到相关元素基于
body来进行定位