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

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

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

When Absolute is selected, a Position Controller appears:

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

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
• Floating “Contact Us” / “Chat Now” buttons

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

Position Comparison

✅ 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