This document aims to solve the difficulties faced by domestic users learning Framer due to the lack of Korean resources. It translates the content of the official blog into Korean and adds practical information. We hope it serves as a small help to those using Framer.

Positioning Methods Usable in Framer

• Absolute: Freely set position based on the parent frame

• Relative: Position is determined by flow, like in a Stack or Grid

• Fixed: Fixed position based on the viewport

• Sticky: Stays fixed upon reaching a certain point, then returns to flow

This article will first cover only the basics of Absolute Positioning.

What is Absolute Positioning?

Absolute Positioning means that the layer is placed at a fixed position relative to the parent frame. In other words, it disregards the relationship with sibling elements and bases its position solely on its distance from the parent frame.

This method is very similar to when we freely drag and place elements in design tools like Figma, making it easy for new Framer users to adapt to this positioning method.

How Does Framer Define Position?

Unlike other design tools that often only show X and Y coordinates, Framer does things slightly differently.

• You can set distance values for each of the four directions: top/bottom, left/right.

• If you enter a value or set a pin for a specific direction, the distance remains the same even if the parent frame size changes.

For example, if you set a pin to a value of "20px from the top," the element will always be 20px from the top, even if the parent frame grows or shrinks.

Pinning and Position Setting

If you select a frame, the right property panel shows values like below. A bold value indicates a pinned value.

• Top, Bottom

• Left, Right

• When pinned: The distance from that direction is fixed

• When unpinned: That direction is ignored and the layer can move dynamically

Example

• Pin left only → Maintains a 20px distance from the left

• Pin both sides → Maintains 20px on both sides and automatically adjusts width

Creating Parent Frames That Encapsulate Existing Elements

After selecting multiple layers,

• Right-click > Add Frame

• Or Cmd + Enter (Mac), Ctrl + Enter (Windows)

This creates a new parent frame that encapsulates the selected elements.
If you want to delete the parent frame and leave only the child elements, follow the method below.

• Cmd + Delete (Mac)

• Ctrl + Delete (Windows)

Shortcuts Useful for Drawing Frames

• Shift: Draw a perfect square

• Alt or Option: Draw outward from the center

• Space: Move position while drawing

Absolute Position vs Relative Position – Caution When Using with a Stack

In Framer, when you create a Stack, elements inside it automatically follow Relative Positioning, aligning top to bottom or left to right based on flow.
But what happens if you change one specific element inside it to Absolute?

• The element will exit the flow

• You can freely drag and place it, but it may overlap with other elements or disrupt the layout

What is z-index?

During such times, you can use the z-index property, which numerically expresses the order of layers, to visually control which element appears on top.

• The default is 0, and the higher the number, the more it appears on top, while lower numbers appear beneath.

• For example, z-index: 1 places the element above others; -1 places it behind.

In Framer, when you switch to Absolute, this z-index value is automatically added, so the basic stacking order is arranged without specific settings.

Note: Use Absolute in a Stack only when necessary, as it can disrupt flow.

When is Absolute Position Useful?

Absolute Position is ideal for UI elements where static positioning is crucial or elements needing visual emphasis.

• Background illustrations in a hero section

• Badges overlapping a CTA button

• Floating animated elements in the background

However, avoid overusing it where content flow is important. Especially for text or list structures, using a Stack is more advantageous.

Summary

• Absolute Positioning allows 'free placement' but operates based on the parent frame

• Setting a pin keeps distance values constant while enabling responsive adjustments

• In a Stack, it exits the flow, so use it cautiously

• Overlapping order can be controlled with z-index

This article is a translated and adapted version of the content from Framer's official YouTube ‘Absolute Positioning in Framer (Fundamentals Lesson 5)’.