position定位属性:五大类型

一. static 定位

  1. 默认值,即没有定位,存在于文档流中,占空间
  2. 设置top, bottom, left, right、z-index不起作用

二. fixed 定位:固定定位

  1. 元素的位置相对于浏览器窗口是固定位置,即使窗口是滚动的它也不会移动
  2. 脱离文档流,不占空间
  3. Fixed定位的元素和其他元素重叠

三. relative 定位:相对定位

  1. 相对定位元素的定位是相对其自身正常位置
  2. 占空间,未脱离文档流
  3. 相对定位元素经常被用来作为绝对定位元素的容器块

四. absolute 定位:绝对定位

  1. 绝对定位元素相对于最近的非 static 的祖先元素,如果元素没有已定位的祖先元素,那么它的位置相对于定位
  2. 脱离文档流,定位的元素与其他元素重叠

五. sticky 定位:粘性定位

  1. 粘性定位可以被认为是相对定位和固定定位的混合
  2. 设置特定阈值,特定阈值指的是 top, right, bottom 或 left 之一。元素在跨越特定阈值前为相对定位,之后为固定定位。
  3. 元素根据正常文档流进行定位,然后相对它的最近滚动祖先(nearest scrolling ancestor)和 containing block (最近块级祖先 nearest block-level ancestor),包括table-related元素,基于top, right, bottom, 和 left的值进行偏移。偏移值不会影响任何其他元素的位置。
  4. 兼容性: Internet Explorer, Edge 15 及更早 IE 版本不支持 sticky 定位,Safari 需要使用 -webkit- prefix

猜你喜欢

转载自blog.csdn.net/qq_41839808/article/details/115869967