什么是定位

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

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

相对定位（Relative）

元素默认为相对定位

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

绝对定位（Absolute）

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

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

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

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

绝对定位的应用场景：

固定定位（Fixed）

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

固定定位的可以用于：

• 固定位置的导航的制作

• 页面右下角一直显示的 ”立即咨询“ 按钮

黏性定位（Sticky）

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

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

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