> ## Knowledge Base Index
> Fetch the complete knowledge base index at: https://helping.alive-pic.com/sitemap.xml
> Use this file to discover available pages before exploring further.
> Pure-Markdown content can be obtained by appending a '.md' suffix to the content URLs listed in the sitemap (without the trailing slash).

# Working with Layers and Z-Index

When your template has multiple elements — photos, text, images, overlays — they stack on top of each other. Layers and z-index control which elements appear in front and which sit behind.

---

## What Is Z-Index?

Z-index is the "depth" of an element. Higher z-index = closer to the front. Lower z-index = further back.

Think of it like a stack of cards:

* **Background** — Always at the bottom
* **Photo slots** — In the middle
* **Text and logos** — On top
* **Overlays** — Can be on top or behind photos, depending on your design

---

## How to Change Layer Order

1. Select an element in the editor
2. Use the **layer controls** to move it forward or backward
3. Options typically include:
   * **Bring to Front** — Move to the top of the stack
   * **Send to Back** — Move to the bottom
   * **Move Forward** — One layer up
   * **Move Backward** — One layer down

[screenshot: Layer controls in editor]

---

## Common Layer Arrangements

### Standard Layout

1. Background (bottom)
2. Photo slots
3. Text
4. Logos / graphics (top)

### Overlay on Top of Photos

1. Background (bottom)
2. Photo slots
3. Decorative elements (top — logos, borders, graphics over the photos)

### Frame Effect

1. Background (bottom)
2. Photo slots
3. Frame / border graphics (top — creates a framing effect around photos)

---

## Tips

* **Photos should usually be behind text and logos** — So branding and info are always visible
* **Use overlays strategically** — A semi-transparent texture on top of photos can add a vintage or artistic feel
* **Preview your layers** — Check with actual photos to make sure important elements aren't hidden behind others

| If something looks "off" in your template — like text disappearing behind a photo — it's almost always a z-index issue. Select the element and bring it to the front.