This document is intended to help domestic users learning Framer by addressing the lack of Korean resources. We’ve translated content from the official blog into Korean and added practical information. We hope it provides some assistance to those using Framer.

Positioning Methods Available in Framer

• Absolute: Set positions freely based on the parent frame

• Relative: Positions are determined according to flow, like in a Stack or Grid

• Fixed: Fixed position relative to the viewport

• Sticky: Stays fixed at a certain point before returning to the flow

In this article, we will only cover the most basic type, Absolute Positioning.

What is Absolute Positioning?

Absolute Positioning places a layer at a specific fixed position based on the parent frame. In other words, it positions elements only in relation to the parent frame, ignoring sibling elements.

This method is very similar to how we freely drag and drop elements in design tools like Figma, making it easier for newcomers to Framer to adapt to this positioning method.

How Does Framer Define Positions?

Unlike other design tools that often show only X and Y coordinates, Framer offers something different.

• You can set distance values for all four directions: top/bottom and left/right.

• If you input a value or set a pin for a certain direction, that distance remains unchanged even if the parent frame resizes.

For instance, if you set a pin with a value of "20px from the top," the element will always remain 20px from the top, regardless of changes to the parent frame's size.

Pinning and Positioning

When you select a frame, you'll see values like the following in the properties panel on the right. Highlighted values are those with pins applied.

• Top, Bottom

• Left, Right

• When a pin is set: The distance in that direction is fixed

• When a pin is removed: That direction is ignored and the layer can move freely

Example

• Pin only the left → Maintain 20px from the left

• Pin both sides → Maintain 20px from both sides while automatically adjusting the width

Creating a Parent Frame Wrapping Existing Elements

After selecting several layers

• Right-click > Add Frame

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

This will create a new parent frame wrapping the selected elements.
If you want to delete the parent frame while leaving the children, follow these steps.

• Cmd + Delete (Mac)

• Ctrl + Delete (Windows)

Useful Shortcuts When Drawing Frames

• Shift: Draw a square

• Alt or Option: Draw from the center outward

• Space: Move while drawing

Absolute Position vs Relative Position – Things to Note When Used with Stack

In Framer, when you create a Stack, elements inside it are automatically arranged based on Relative Positioning, flowing vertically or horizontally.
But what happens if you change one specific element inside to Absolute?

• The element drops out of the flow

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

What is z-index?

In this case, you can use the z-index property, which represents the stacking order of layers with numbers, to visually adjust which element appears on top.

• The default value is 0, with higher numbers displayed on top and lower numbers below.

• For example, a z-index: 1 will place the element in front of others, while 1 puts it behind other elements.

In Framer, when switching to Absolute, this z-index value is automatically added, so you don't need to set it specially to manage the basic overlap order.

Note: As it can disrupt the flow, use Absolute within a Stack only when absolutely necessary.

When Is It Best to Use Absolute Position?

Absolute Position is suitable for UI elements with a static location or elements that need visual emphasis.

• Background illustrations in the hero section

• A badge overlapping a CTA button

• Floating animated elements in the background

However, on pages where content flow is important, it's best not to overuse it. Using Stack is more advantageous, especially for text or list structures.

Summary

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

• Pinned settings retain distance values for responsive adaptation

• Use cautiously within a Stack as it deviates from the flow

• Use z-index to manage overlapping order

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