设计

/

什么是定位

最后更新时间:

2025-02-25

Creght 系统提供了4中类型的定位:相对定位、绝对定位、固定定位、黏性定位。

选中元素,在右侧可以选择元素的定位方式。

image.png

相对定位(Relative)

元素默认为相对定位

  • 不脱离文档流,占位置(父容器设置宽高自适应时,父容器不会塌陷)
  • 元素会按照父级指定的方向自动依次排列,不会重叠。

image.png

绝对定位(Absolute)

绝对定位脱离文档流,不占位置(父容器设置宽高自适应时,父容器会塌陷)

  • 可以与其他元素发生重叠

image.png

当元素位置设置为绝对定位,在位置栏就会多出一个位置控制器。

image.png

位置控制器可以准确的设置元素在父级中的位置,如上图,指定了元素底部(值为 0)和左边(值为0)对齐父级元素。

绝对定位的应用场景:

 

固定定位(Fixed)

  • 脱离文档流,不占位置(父容器设置宽高自适应时,父容器会塌陷)
  • 一般基于浏览器定位,即设置 top 为 0 时,无论是否发生页面滚动,元素都会一直紧贴浏览器顶部。

固定定位的可以用于:

  • 固定位置的导航的制作
  • 页面右下角一直显示的 ”立即咨询“ 按钮

黏性定位(Sticky)

  • 不脱离文档流,占位置
  • 粘性定位可以被认为是相对定位和固定定位的混合。元素在跨越特定阈值前为相对定位,之后为固定定位。

黏性定位不好用语言来描述,您可以打开这个示例,观察在滚动时卡片 1 和卡片 2 的位置变化来体验粘性定位的作用:

https://example.site.creght.com/stickyDemo1

image.png

继续阅读

下一篇