# Overlays | Creght Visual Documentation

> Creght supports two types of overlays: Relative Overlay and Absolute Overlay . Relative Overlay A Relative Overlay floats around an element.…

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

Basic

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

Design

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

CMS

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

Site Setting

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

AI

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

Tool

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

Design/

# Overlays

Creght supports two types of overlays: **Relative Overlay** and **Absolute Overlay**.

## Relative Overlay

A **Relative Overlay** floats around an element. It is commonly used for tooltips, dropdown menus, and similar UI patterns.

- To add a relative overlay:
1. Select any frame.
     ![image.png](https://fsb.huglight.cn/project/mtdDqMgsnYi/madIrIJaznK__image.png)
2. In the right panel, go to **Overlay → Add → Relative**.
- By default, the overlay size is **200 × 200px**, but you can resize it by dragging the edges.
- An overlay works like a regular container, meaning you can add any child elements inside it just as you would on the main canvas.
![image.png](https://fsb.huglight.cn/project/mtdDqMgsnYi/madIsdbLrtz__image.png)

Example: A tooltip created with a relative overlay.

_![image.png](https://fsb.huglight.cn/project/mtdDqMgsnYi/madIsuuoIai__image.png)_

You can also find ready-to-use templates under **Insert → Overlay**.

![image.png](https://fsb.huglight.cn/project/mtdDqMgsnYi/madIsXENnjW__image.png)

## Absolute Overlay

An **Absolute Overlay** covers the entire page. It is typically used for modals, video players, or detail views.

Example: A video modal with a close button.

_![image.png](https://fsb.huglight.cn/project/mtdDqMgsnYi/madItkBlnyc__image.png)_

- To add an absolute overlay:
1. Select any frame.
2. In the right panel, go to **Overlay → Add → Absolute**.
- An absolute overlay includes a **fullscreen mask container** by default.
  - The mask has fixed width and height (fullscreen) and cannot be resized.
  - However, you can customize its background color.

## Relative vs. Absolute Overlay

| Feature | Relative Overlay | Absolute Overlay |
| --- | --- | --- |
| **Position** | Floats around an element | Covers the entire page |
| **Typical Use Cases** | Tooltip, dropdown menu | Modal, video player, data details |
| **Default Size** | 200 × 200px (resizable) | Fullscreen (fixed) |
| **Resizable** | ✅ Yes (drag to adjust) | ❌ No (fixed fullscreen) |
| **Background Overlay** | Not included | ✅ Includes fullscreen mask (color customizable) |
| **How to Add** | Right panel → Overlay → Add → Relative | Right panel → Overlay → Add → Absolute |

On this page

- [Relative Overlay](#relative-overlay)
- [Absolute Overlay](#absolute-overlay)
- [Relative vs. Absolute Overlay](#relative-vs-absolute-overlay)

> Full page index: [/llms.txt](/llms.txt)