Relative Overlays

Add dropdowns to any layer with Appear Effects, a Dynamic Safe Area, custom positioning, and more.

Add dropdowns to any layer with Appear Effects, a Dynamic Safe Area, custom positioning, and more.

In this Framer tutorial, you will learn Relative Overlays. We explain a practical workflow, highlight the key settings that affect the result, and show how to apply the technique on real pages for cleaner UX and better site performance.

Lesson details

Oct 19, 2023

10:20

Open Site

Related videos

  • 4:05

    4:05

    How to get the most out of Framer for Free

    October 17, 2025

  • 10:44

    10:44

    Design mobile menu’s with custom fade-in animations.

    July 11, 2023

  • 4:05

    4:05

    How to get the most out of Framer for Free

    October 17, 2025

  • 10:44

    10:44

    Design mobile menu’s with custom fade-in animations.

    July 11, 2023

Academy

Search

Learn

Courses

Videos

Dictionary

Help

Articles

Support

Academy

Loading status
loading

Downloads

Mac

Windows

CCPA

  • Product
  • AI
  • Design
  • Publish
  • Collaborate
  • Convert
  • CMS
  • SEO
  • Hosting
  • Performance
  • Updates

    New

  • Business
  • Pricing
  • Switch
  • Startups
  • Agencies
  • Enterprise
  • Solutions
  • Figma to HTML
  • Website builder
  • Portfolio maker
  • Landing pages
  • UI/UX design
  • No-code
  • Compare
  • Claude Code
    Squarespace
    WordPress
    Webflow
    Lovable
    Figma
    Wix
    Codex
    Unbounce
    Contentful
    Ceros
    Readymag
  • Resources
  • Marketplace
  • Templates
  • Components
  • Plugins
  • Vectors
  • Free domains

    New

  • Case studies
  • Developers
  • Newsletter
  • Support
  • Contact
  • Guides
  • Brand
  • Blog
  • Company
  • Meetups
  • Careers
  • Security
  • Abuse
  • Media
  • Legal
  • Store
  • Trust center
  • Programs
  • Experts
  • Creators
  • Students
  • Ambassadors

Get an AI summary of Framer

© Framer B.V.

2026

Loading status
loading

Downloads

Mac

Windows

CCPA

  • Product
  • AI
  • Design
  • Publish
  • Collaborate
  • Convert
  • CMS
  • SEO
  • Hosting
  • Performance
  • Updates

    New

  • Business
  • Pricing
  • Switch
  • Startups
  • Agencies
  • Enterprise
  • Solutions
  • Figma to HTML
  • Website builder
  • Portfolio maker
  • Landing pages
  • UI/UX design
  • No-code
  • Compare
  • Claude Code
    Squarespace
    WordPress
    Webflow
    Lovable
    Figma
    Wix
    Codex
    Unbounce
    Contentful
    Ceros
    Readymag
  • Resources
  • Marketplace
  • Templates
  • Components
  • Plugins
  • Vectors
  • Free domains

    New

  • Case studies
  • Developers
  • Newsletter
  • Support
  • Contact
  • Guides
  • Brand
  • Blog
  • Company
  • Meetups
  • Careers
  • Security
  • Abuse
  • Media
  • Legal
  • Store
  • Trust center
  • Programs
  • Experts
  • Creators
  • Students
  • Ambassadors

Get an AI summary of Framer

© Framer B.V.

2026

Loading status
loading
  • Product
  • AI
  • Design
  • Publish
  • Collaborate
  • Convert
  • CMS
  • SEO
  • Hosting
  • Performance
  • Updates

    New

  • Business
  • Pricing
  • Switch
  • Startups
  • Agencies
  • Enterprise
  • Solutions
  • Figma to HTML
  • Website builder
  • Portfolio maker
  • Landing pages
  • UI/UX design
  • No-code
  • Compare
  • Claude Code
    Squarespace
    WordPress
    Webflow
    Lovable
    Figma
    Wix
    Codex
    Unbounce
    Contentful
    Ceros
    Readymag
  • Resources
  • Marketplace
  • Templates
  • Components
  • Plugins
  • Vectors
  • Free domains

    New

  • Case studies
  • Developers
  • Newsletter
  • Support
  • Contact
  • Guides
  • Brand
  • Blog
  • Company
  • Meetups
  • Careers
  • Security
  • Abuse
  • Media
  • Legal
  • Store
  • Trust center
  • Programs
  • Experts
  • Creators
  • Students
  • Ambassadors

CCPA

Get an AI summary of Framer

© Framer B.V.

2026

Log in
Sign up

Copy

Logo as SVG

Brand

Guidelines

Product
Teams
Resources
Community
Support
Enterprise
Pricing