定位的那点事

169 阅读1分钟
relative

相对定位:相对自己现在的位置进行移动

  1. 如果设置top为正元素相对自己位置下移,如果设置top为负元素相对自己位置上移
  2. 如果设置bottom为正元素相对自己位置上移,如果设置bottom为负元素相对自己位置下移
  3. 如果设置left为正元素相对自己位置右移,如果设置left为负元素相对自己位置左移
  4. 如果设置right为正元素相对自己位置左移,如果设置right为负元素相对自己位置右移
absolute

绝对定位:相对自己的离自己最近的祖先元素的position值不为static的元素定位

  1. top表示当前元素距离定位元素上边距的距离
  2. bottom表示当前元素距离定位元素下边距的距离
  3. left和right同理
fixed

固定定位:相对浏览器可视区域定位

sticky

粘性定位:relative和fixed的结合,相对于离它最近的具有滚动框的祖先元素偏移,如果祖先元素都不可以滚动,那么是相对父级偏移

如果祖先元素都没有出滚动条:当前元素的position属性相当于relative,会相对于祖先元素设置了overflow为hidden或者auto的元素偏移,如果祖先元素都没有设置则会相对html偏移

如果祖先元素出现滚动条:并且该元素的位置将要移出偏移范围时,当前元素的position属性相当于fixed

static

默认属性,设置left、top、right、bottom、z-index均无效