relative
相对定位:相对自己现在的位置进行移动
- 如果设置top为正元素相对自己位置下移,如果设置top为负元素相对自己位置上移
- 如果设置bottom为正元素相对自己位置上移,如果设置bottom为负元素相对自己位置下移
- 如果设置left为正元素相对自己位置右移,如果设置left为负元素相对自己位置左移
- 如果设置right为正元素相对自己位置左移,如果设置right为负元素相对自己位置右移
absolute
绝对定位:相对自己的离自己最近的祖先元素的position值不为static的元素定位
- top表示当前元素距离定位元素上边距的距离
- bottom表示当前元素距离定位元素下边距的距离
- left和right同理
fixed
固定定位:相对浏览器可视区域定位
sticky
粘性定位:relative和fixed的结合,相对于离它最近的具有滚动框的祖先元素偏移,如果祖先元素都不可以滚动,那么是相对父级偏移
如果祖先元素都没有出滚动条:当前元素的position属性相当于relative,会相对于祖先元素设置了overflow为hidden或者auto的元素偏移,如果祖先元素都没有设置则会相对html偏移
如果祖先元素出现滚动条:并且该元素的位置将要移出偏移范围时,当前元素的position属性相当于fixed
static
默认属性,设置left、top、right、bottom、z-index均无效