定位(Position)

2分钟了解 Creght 的定位。

参数说明

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

1. 相对定位(Relative): 不脱离文档流,占位置(父容器设置宽高自适应时,不会塌陷)
2. 绝对定位(Absolute): 脱离文档流,不占位置,基于父容器定位(父容器设置宽高自适应时,会塌陷)
应用场景

绝对定位,将文字放置到图片上

绝对定位

实现蒙层

3. 固定定位(Fixed): 脱离文档流,不占位置,默认基于视口定位(但是如果祖先元素中有设置transform,就会基于此元素定位)
应用场景

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

1. 固定导航

2. 右侧固定展示一些信息:比如在线咨询

3.....

4. 黏性定位(Sticky): 不脱离文档流,占位置。粘性定位可以被认为是相对定位和固定定位的混合。元素在跨越特定阈值前为相对定位,之后为固定定位。
示例链接:https://example.site.creght.com/stickyDemo
注意事项:
1. 祖先元素能滚动
2. 祖先元素不能设置overflow:hidden

黏性定位,top=0

黏性定位,top=0

应用场景

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

1. 导航

2.黏性卡片

3. ....