# 什么是定位 | Creght 可视化文档

> Creght 系统提供了4中类型的定位：相对定位、绝对定位、固定定位、黏性定位。 选中元素，在右侧可以选择元素的定位方式。 相对定位（Relative） 元素默认为相对定位 不脱离文档流，占位置（父容器设置宽高自适应时，父容器不会塌陷） 元…

[![Creght](https://ugc.talizen.com/_assets/site/2061660904709165056/1780797461299__creght_logo.png)帮助文档](/help.md)

[更新历史](/blogs.md)

[AI](/docs/ai/quick-create-first-website.md) [可视化](/docs/get-start.md)

入门

- [两分钟了解 Creght](/docs/get-start.md)
- [如何注册 Creght](/docs/signup.md)
- [快速制作网站](/docs/create-site.md)
- [模板](/docs/tpls.md)

设计

- [编辑器](/docs/editor.md)
- [基本操作](/docs/operating.md)
- [什么是布局](/docs/layout.md)
- [什么是定位](/docs/position.md)
- [什么是尺寸](/docs/size.md)
- [断点](/docs/breakpoint.md)
- [弹窗](/docs/popover.md)
- [组件](/docs/components.md)
- [添加第三方字体](/docs/tp-font.md)
- [副本与深拷贝](/docs/deep-copy.md)

CMS

- [内容管理 \- CMS](/docs/cms.md)
- [CMS 导入微信公众号文章](/docs/wxmp.md)

网站设置

- [页面设置](/docs/page-setting.md)
- [如何升级套餐](/docs/manage-plan.md)
- [SEO 设置](/docs/seo-setting.md)
- [小文件](/docs/verification-file.md)
- [绑定自定义域名](/docs/custom-domain.md)
- [如何进行网站备案](/docs/beian.md)
- [服务器节点说明](/docs/website-node.md)
- [如何切换站点](/docs/pxrp79jqtnyq.md)
- [多语言本地化](/docs/localization.md)

AI

- [关于 Creght AI](/docs/creght-ai.md)

工具

- [从 Figma 设计稿到可交互网站](/docs/figma-to-creght.md)
- [Figma 转响应式布局的 3 大核心指南](/docs/figma-autolayout.md)
- [Figma 设计稿一键转响应式网站](/docs/response-site.md)
- [Figma 转响应式网站-交互篇](/docs/figma03.md)
- [使用 FFmpeg 压缩视频](/docs/ffmpeg.md)
- [如何将 Clarity 添加到您的网站](/docs/clarity.md)
- [按钮 Hover 动效制作教程](/docs/button.md)
- [响应式导航栏制作教程](/docs/nav.md)
- [折叠面板](/docs/collapse.md)

设计/

# 什么是定位

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

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

![image.png](https://fsb.huglight.cn/8d4fea8d168c2e7f35f8da0ea9d7b2b8/image.png)

### **相对定位（Relative）**

元素默认为相对定位

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

![image.png](https://fsb.huglight.cn/c6508d58e5de03366b9c99cd6a5961c3/image.png)

### **绝对定位（Absolute）**

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

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

![image.png](https://fsb.huglight.cn/e222100f691b2ba8b634120842eab514/image.png)

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

![image.png](https://fsb.huglight.cn/f653524b3209510758af19e1e4df3a39/image.png)

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

绝对定位的应用场景：

![](https://fsb.huglight.cn/ee80be9adb7c4ce39e2322cf44bdba2e/mcPDlNWNynT__image.png)

### **固定定位（Fixed）**

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

固定定位的可以用于：

- 固定位置的导航的制作

![](https://fsb.huglight.cn/801f8dd0fab2c2cf1ffddad8ebca9a18/mcPDQJQLDUZ__image.png)

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

![](https://fsb.huglight.cn/1654be643b4cb741829cc72a4eb615f0/mcPDTCHpmVy__image.png)

### **黏性定位（Sticky）**

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

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

[https://example.site.creght.com/stickyDemo1](https://example.site.creght.com/stickyDemo1)

![image.png](https://fsb.huglight.cn/b25cb2495d9b260c5a7c726bf37a6db4/image.png)

本文目录

- [相对定位（Relative）](#相对定位-relative)
- [绝对定位（Absolute）](#绝对定位-absolute)
- [固定定位（Fixed）](#固定定位-fixed)
- [黏性定位（Sticky）](#黏性定位-sticky)

![Creght](https://ugc.talizen.com/_assets/site/2061660904709165056/1780797461299__creght_logo.png)

此网站使用 [Creght](/) 创建

![微信客服](https://fsu.creght.com/site/2066727200882692096/1785119134612__image.png)

微信客服

## 链接

- [价格](/price.md)
- [解决方案](/solution.md)
- [客户案例](/customers.md)
- [帮助中心](/help.md)
- [联系我们](/contact.md)
- [更新记录 & 博客](/blogs.md)
- [退款说明](/tuikuan.md)

## 资源

- [全部资源](/resources.md)
- [模板](/templates.md)
- [组件库](https://creghtlib.site.creght.com)
- [动效库](/design/effects.md)
- [Figma to Creght](/figma2creght.md)
- [API](/api.md)

## 产品对比

- [对比上线了](/creght-vs-sxl.md)
- [对比凡科建站](/creght-vs-fkw.md)
- [自己写代码 vs Creght](/compare/self-coding.md)
- [外包 vs 自己做](/compare/outsourcing.md)

## 协议

- [用户协议](/legal/terms.md)
- [隐私政策](/legal/privacy.md)
- [可接受使用政策](/legal/acceptable-use.md)

## 社交媒体

- [小红书](https://www.xiaohongshu.com/user/profile/5a38606811be10715f4895b6)
- [哔哩哔哩](https://space.bilibili.com/513308095)

[蜀ICP备2023038192号-2](https://beian.miit.gov.cn)