# Position in Creght | Creght Visual Documentation

> Creght supports four types of positioning: Relative, Absolute, Fixed, and Sticky . You can change an element’s positioning in the right-hand settings panel .…

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

[Changelog](/blogs)

[AI](/docs/ai/quick-create-first-website) [Visual](/docs/get-start)

Basic

- [Get to Know Creght in 2 Minutes](/docs/get-start)
- [How to Register for Creght](/docs/signup)
- [Creating a Project in Creght](/docs/create-site)
- [Templates](/docs/tpls)

Design

- [Using the Editor](/docs/editor)
- [Basic Operations](/docs/operating)
- [Layouts in Creght](/docs/layout)
- [Position in Creght](/docs/position)
- [Size in Creght](/docs/size)
- [Breakpoints in Creght](/docs/breakpoint)
- [Overlays](/docs/popover)
- [Components in Creght](/docs/components)
- [Adding Third-Party Fonts](/docs/tp-font)
- [Duplicate and Deep Copy](/docs/deep-copy)

CMS

- [CMS (Content Management System)](/docs/cms)
- [Importing WeChat Official Account Articles into CMS](/docs/wxmp)

Site Setting

- [Page Settings](/docs/page-setting)
- [How to Upgrade a Plan](/docs/manage-plan)
- [SEO Settings](/docs/seo-setting)
- [Small Files (Site Verification)](/docs/verification-file)
- [Adding a Custom Domain in Creght](/docs/custom-domain)
- [How to Complete ICP Filing](/docs/beian)
- [Server Nodes](/docs/website-node)
- [How to Switch Sites](/docs/pxrp79jqtnyq)
- [Localization](/docs/localization)

AI

- [About Creght AI](/docs/creght-ai)

Tool

- [Convert Figma Designs into Live Websites](/docs/figma-to-creght)
- [3 Guidelines for Responsive Figma Layouts](/docs/figma-autolayout)
- [Covert Figma to live website](/docs/response-site)
- [Figma to Responsive Website: Interactions](/docs/figma03)
- [Compressing Video with FFmpeg](/docs/ffmpeg)
- [How to Add Clarity to Your Website](/docs/clarity)
- [Creating a Button Hover Effect](/docs/button)
- [How to Build a Reusable Collapsible FAQ Panel](/docs/collapse)
- [Responsive Navigation Tutorial](/docs/nav)

Design/

# Position in Creght

Creght supports four types of positioning: **Relative, Absolute, Fixed, and Sticky**.

You can change an element’s positioning in the **right-hand settings panel**.

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

## 1\. Relative Positioning

- Default positioning for all elements
- ✅ Stays in the document flow (occupies space)
- Parent containers with auto width/height will not collapse
- Elements are arranged in order, without overlap

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

## 2\. Absolute Positioning

- ❌ Removed from the document flow (does not occupy space)
- Parent containers with auto width/height will collapse
- Elements can overlap with others

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

When Absolute is selected, a **Position Controller** appears:

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

This allows precise placement of an element relative to its parent (e.g., **bottom: 0, left: 0**).

**Use cases:**

- Overlaying elements (e.g., badges, icons on images)
- Manual placement inside containers

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

## 3\. Fixed Positioning

- ❌ Removed from document flow (does not occupy space)
- Pinned relative to the **browser viewport**
- Example: `top: 0` keeps the element fixed to the top, even when scrolling

**Use cases:**

- Persistent navigation bars _![](https://fsb.huglight.cn/801f8dd0fab2c2cf1ffddad8ebca9a18/mcPDQJQLDUZ__image.png)_
- Floating “Contact Us” / “Chat Now” buttons

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

## 4\. Sticky Positioning

- ✅ Remains in the document flow (occupies space)
- Acts as **Relative** until a threshold is reached, then switches to **Fixed**
- Great for elements that should “stick” temporarily while scrolling

👉 Try it yourself: [Sticky Positioning Demo](https://example.site.creght.com/stickyDemo1)

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

## Position Comparison

| Positionin | In Document Flow | Occupies Space | Moves with Scroll | Typical Use Cases |
| --- | --- | --- | --- | --- |
| **Relative** | ✅ Yes | ✅ Yes | ✅ Yes | Default positioning, normal flow |
| **Absolute** | ❌ No | ❌ No | ✅ Yes (relative to parent) | Overlays, manual placement |
| **Fixed** | ❌ No | ❌ No | ❌ No (fixed to viewport) | Nav bars, floating buttons |
| **Sticky** | ✅ Yes (until threshold) | ✅ Yes | Mixed (Relative → Fixed) | Section headers, sticky cards |

✅ **Summary:**

- Use **Relative** for default layouts
- Use **Absolute** for overlays inside a parent
- Use **Fixed** for elements pinned to the screen
- Use **Sticky** for hybrid scroll-based behaviors

On this page

- [1\. Relative Positioning](#1-relative-positioning)
- [2\. Absolute Positioning](#2-absolute-positioning)
- [3\. Fixed Positioning](#3-fixed-positioning)
- [4\. Sticky Positioning](#4-sticky-positioning)
- [Position Comparison](#position-comparison)

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

This website is built with [Creght](/)

[Discord](https://discord.gg/Qvq2nmZNnb)

## Links

- [Pricing](/price)
- [Solutions](/solution)
- [Customers](/customers)
- [Help Center](/help)
- [Contact Us](/contact)
- [Blog](/blogs)
- [Refund Policy](/tuikuan)

## Resources

- [All Resources](/resources)
- [Templates](/templates)
- [Components](https://creghtlib.site.creght.com)
- [Animations](/effects)
- [Figma to Creght](/figma2creght)
- [API for AI](/api)

## Terms

- [Terms of Service](/legal/terms)
- [Privacy Policy](/legal/privacy)
- [Acceptable Use Policy](/legal/acceptable-use)

## Social Media

- [Twitter](https://twitter.com)
- [Facebook](https://www.facebook.com)
- [LinkedIn](https://www.linkedin.com)

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