# Control element position with constraints
Keep elements exactly where you want them, like a badge in the corner of an image or a logo in the center of a banner, on desktop, tablet, and mobile.
## When to use
Best fits for:
* Keeping an element anchored to a specific edge or corner as the screen resizes
* Positioning elements freely inside a Frame, without them shifting unpredictably on a different device
* Centering an element so it never drifts horizontally or vertically
### Constraints vs. Stack vs. Absolute position
## Common setup
1. Select the element.
2. In the Inspector, go to **Design** > **Constraints**.
3. Drag the element in the canvas directly, or choose a horizontal and a vertical anchor, then enter the distance from that edge.
## How constraints are measured
### Against the closest container
Constraints are measured from the edges of the element's **closest container**. Not the whole page.
For example, a "Free shipping on all orders" badge inside a frame is measured from the **frame's** edges, not the section around it. If you move or resize the frame, the badge moves with it.
### Horizontal in %, vertical in px
| Direction | Unit | What happens on smaller screens |
| ------------ | ---- | :------------------------------------------ |
| Left / Right | % | The distance shrinks with the screen width. |
| Top / Bottom | px | The distance stays the same. |
*Example:* you set **Left: 10%** and **Top: 100px**. On a 1265 px wide container, the element sits about 127 px from the left. On a 900 px container, it moves to 90 px from the left, but stays 100 px from the top.
Because horizontal distances shrink with the screen, elements placed side by side can end up overlapping on mobile. Switch to mobile view and adjust the constraints there. Constraints can be set separately for each device.
## Automatic constraints
When you drag an element into a section or frame, Foxify anchors it to the **top** and to the **left or right** edge, whichever is closer. You'll see dashed blue lines while you drag.
To enable Automatic constraints:
1. Click on the element you want to set the auto constraints to open its **Inspector** panel.
2. Under the **General** tab, click **Auto constraints elements**.
## Quickly align an element
Use the align icons at the top of the **General** or **Design** tab to snap an element to an edge, or center it inside its container. This replaces its current constraints.
## Where constraints apply — and where they don't
* You **can** apply constraints to any element placed inside a section or frame — including a **Frame itself**, when that [Frame is nested inside another Frame](https://docs.foxecom.com/foxify-app/foxstudio/layout-and-styling/frame-elements#nested-frames). A Frame is just another element, so it carries its own Constraints the same way a Text or Image element would.
* You **can't** apply constraints to an element that's a direct child of a [Stack](https://docs.foxecom.com/foxify-app/foxstudio/layout-and-styling/stack-elements) — Auto layout controls those instead. Exception**:** if you change that element's own Position to **Absolute**, it gets real positioning control via Inset — effectively working like Constraints. Learn more: [Position elements with Relative, Absolute, or Sticky](https://docs.foxecom.com/foxify-app/foxstudio/layout-and-styling/position-elements-with-relative-absolute-or-sticky)
## FAQs
#### What's the difference between constraints and auto layout?
Constraints anchor an element you've placed manually — typically inside a Frame. Auto layout automatically arranges the children of a Stack or Cell instead, and Constraints don't apply there.
#### **Why is horizontal position in % but vertical in px?**
Because horizontal space compresses more as screens narrow (phone vs. desktop), while vertical stacking usually doesn't need to shrink the same way — so % scales with the screen, and px holds steady.
#### If an element is nested inside a Frame inside a Section, what is its constraint relative to?
The Frame — its immediate parent. Not the Section.
#### Can I set different constraints for each device?
Yes. Switch to desktop, tablet, or mobile view in the top bar, then set the constraints for that device.
## Related articles
Frame elements
Stack elements
Edit elements with the Inspector panel