position的常见属性都是根据什么元素定位的?

62 阅读1分钟
  1. static
  • 默认定位,left,right无影响

  • 不脱离文档流

  1. reletive
  • 相对定位,根据自身初始位置定位

  • left,top等属性会使位置发生偏移

  • 不脱离文档流

  1. absolute
  • 绝对定位元素是根据离其(自身)最近并且有定位设置(static定位除外)的父元素作为参考点的,但是如果向上找到html标签,都没有父元素有定位设置,则将html标签视为参考点

  • 脱离文档流

  1. fixed
  • 固定定位,根据浏览器视口定位

  • 脱离文档流

  1. sticky
  • 粘性定位,根据用户滚动位置进行定位

  • 当元素滚动到目标位置(比如top规定的值,距离浏览器显示窗口的距离)时

会和固定定位一样固定浏览器显示窗口的位置不动,常用来做滚动吸顶效果

  • 不脱离文档流