CSS2.0之后添加了Position,定位属性,主要包括四种
- static:保持元素所在文档中的位置
元素框正常生成。块级元素生成一个矩形框,作为文档流的一部分,行内元素则会创建一个或多个行框,置于其父元素中。
- relative:相对于元素在文档中最原始的位置进行偏移,偏移量为设置的
top/left/right/bottom
- 参照位置为元素原始位置
- 元素形状大小不会改变
- 元素偏移之后,元素在文档中的原始空间仍旧保留
元素框偏移某个距离。元素仍保持其未定位前的形状,它原本所占的空间仍保留。
- absolute:绝对定位,当设置为absolute之后,会重新根据元素的填充生成一个新的块,偏移量为设置的
top/left/right/bottom
- 参照位置为其所有父元素中,最靠近元素本身的一个设置了position为非static的元素所处位置
- 元素大小或形状会发生改变,会根据它的子元素重新生成为一个会计元素
- 元素在文档中的原始空间不会包留,会被移除,后续其他兄弟元素补进
- 当元素没有设置了position为非static的父元素时,相对位置为document的左上角
元素框从文档流完全删除,并相对于其包含块定位。包含块可能是文档中的另一个元素或者是初始包含块。元素原先在正常文档流中所占的空间会关闭,就好像元素原来不存在一样。元素定位后生成一个块级框,而不论原来它在正常流中生成何种类型的框。
- fixed
元素框的表现类似于将 position 设置为 absolute,不过其包含块是视窗本身。