文档流
文档流也被称为normal flow普通流,是元素在html中的排列方式。
block元素单独占一行垂直排列,inline元素在行内从左至右依次排列。
定位的四种类型
static 静态定位
静态定位是默认的定位方式。它遵循正常的文档流,并且占用文档空间。
当position:static时,属性top | right | bottom | left | z-index无效。
relative 相对定位
相对定位是根据源北在文档流中的位置进行偏移,原本的位置遵循正常的文档流,且原本的位置会占用文档空间,实际展现的元素可能会覆盖周围的其他元素。
为了定位移动的相对位置,可以使用属性 top | right | left | bottom。
absolute 绝对定位
使用绝对定位的元素脱离文档流,且不占据文本空间,元素只能根据祖先类元素进行定位,并且这个祖先类的position属性不能为static.
当设置元素A的position:absolute后,它会从父元素逐层往上寻找,直到找到第一个属性position!=static的元素,(最终到元素为止)
注意
和相差8px的边距
relative和static最外层的定位原点为
而absolute最外层的定位远点为
abdolute不生效
当使用absolute属性时,必须指定 top | bottom | left | right 属性中的至少一个,否则这四个属性采用默认值auto,这将会导致对象遵从正常的html布局,即relative。
对齐优先级
top > bottom
left > right
fixed 固定定位
固定定位以窗口为定位原点进行偏移定位,脱离了文档流,使用 top | bottom | left | right 属性确定偏移值。
注意,固定定位的元素不会根据滚动条的滚动而移动。