# Smart Stacking

> Stack 2 elements relative to each other to create truly dynamic renders with Orshot Studio

- **URL**: https://orshot.com/docs/orshot-studio/smart-stacking

---

## What is Smart Stacking?

Smart Stacking allows you to position elements relative to other elements automatically. When the target element moves, resizes, or changes content, the stacked element adjusts its position accordingly.

## Video Tutorial

<div className="mb-4">
  <iframe
    width="100%"
    height="400"
    src="https://www.youtube.com/embed/Q0XsIxv3-VE"
    title="Smart Stacking in Orshot Studio"
    frameBorder="0"
    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
    allowFullScreen
    className="rounded-lg"
  ></iframe>
</div>

## How It Works

- **Dynamic Positioning**: Elements maintain their relative position to a target element
- **Real-time Updates**: Stacked elements move automatically when target elements change
- **Multipage Support**: Works seamlessly across all pages in multipage templates
- **Chain Stacking**: Elements can stack to other stacked elements, creating dependency chains

## Setting Up Smart Stacking

- **Enable Stacking**: Toggle "Smart Stacking" in the element editor
- **Select Target**: Choose which element to stack relative to
- **Choose Position**: Pick from 9 position options (top-left, center, bottom-right, etc.)
- **Add Offsets**: Fine-tune with X and Y pixel offsets

## Position Options

- **Top Row**: `top-left` | `top-center` | `top-right`
- **Middle Row**: `middle-left` | `middle-center` | `middle-right`
- **Bottom Row**: `bottom-left` | `bottom-center` | `bottom-right`

## Working with Text Elements

- **Content-Aware**: Stacking calculates based on actual text content size, not container size
- **Font Changes**: Automatically adjusts when target text font, size, or content changes
- **Text Modes**: Works with all text modes (overflow, truncate, fit)
- **Vertical Alignment**: Stacking position respects text vertical alignment settings

## Advanced Features

- **Circular Dependency Prevention**: System prevents elements from stacking to themselves in loops
- **Performance Optimized**: Uses DOM measurement caching for smooth interactions
- **Offset Controls**: Precise positioning with X/Y pixel offsets
- **Multi-Selection Compatible**: Works with bulk operations and element alignment tools

## Best Practices

- Use **bottom-center** for captions under images
- Use **right** positioning for labels next to form elements
- Combine with **vertical alignment** for precise text positioning
- Use **offset values** for breathing room between elements