---
title: "Coordinates, sizing and layers"
canonical_url: https://docs.zvid.io/docs/concepts/layout/
source: docs/concepts/layout.md
content_revision: 6338386a1dd87e4a
---

# Coordinates, sizing and layers

Zvid places visual elements on a pixel canvas. Output dimensions establish the coordinate space; each element then has a position, anchor and content size. Use [the common-property reference](https://docs.zvid.io/docs/structure/common-properties/) for the exact supported fields by element type.

## Dimensions and resolution

Use a [resolution preset](https://docs.zvid.io/docs/structure/properties/resolution-presets/) for a common output size, or use `resolution: "custom"` with explicit `width` and `height`. A preset can replace the dimensions you supply. When you override a template's width/height without choosing another preset, the submission pipeline switches the output resolution to custom.

Dimensions and coordinates are pixels. Changing the canvas size does not automatically redesign the typography or spacing of a composition. Inspect the resulting layout, especially when changing aspect ratio.

## Position and anchor are different

| Field | Purpose |
| --- | --- |
| `position` | A preset such as `center-center`, or `custom` for explicit coordinates |
| `x`, `y` | The location used for custom placement |
| `anchor` | Which point of the element sits at the location; also affects rotation/scaling origin |
| `width`, `height` | Element box or media size, depending on element type |

A non-custom position preset computes the location and takes precedence over `x`/`y` and `anchor`. For an exact margin, select `position: "custom"` and supply coordinates and an explicit anchor. With `anchor: "center-center"`, the coordinates name the element's center; with `top-left`, they name its top-left corner.

See the complete demonstrations in [Position](https://docs.zvid.io/docs/structure/properties/position/), [Anchor](https://docs.zvid.io/docs/structure/properties/anchor/), and [Text and HTML](https://docs.zvid.io/docs/structure/text-elements/).

## Fit media into a box

- **`contain`** preserves all the source content and can leave unused space.
- **`cover`** fills the destination area and can crop source edges.

These are the two accepted `resize` values; `stretch` is not a supported value. With explicit `width` and `height`, resizing fits the source into that element box. Without a box, it fits the source against the project canvas.

Use the accepted field values and paired examples in [Resize](https://docs.zvid.io/docs/structure/properties/resize/). [Crop parameters](https://docs.zvid.io/docs/structure/properties/crop-params/) select source content; resizing determines how that content occupies the destination. Check the support matrix before applying image-specific properties to another element type.

## Keep text readable

Set the text box size deliberately, especially for variable content. Use [text fitting](https://docs.zvid.io/docs/structure/text-elements/) when labels vary in length, and validate the longest expected values. HTML lets a single text element own related text and its background, which helps keep alignment consistent.

When text sits over media, use sufficient contrast and a background/scrim where needed. Review the rendered example and layout warnings; structural validation does not prove that text is readable or fits inside a design.

## Layer ordering

Use the element's `track` to express stacking and consult [common properties](https://docs.zvid.io/docs/structure/common-properties/) for ordering behavior. Avoid depending on accidental ordering across separately rendered scene and global layers. In a scene-based video, project-level elements form the global overlay layer described in [Scenes](https://docs.zvid.io/docs/structure/scenes/).

## Diagnose a misplaced element

1. Confirm the resolved canvas dimensions, including preset effects.
2. Check whether a position preset is overriding your coordinates.
3. Inspect the anchor and destination box dimensions.
4. Check crop/resize behavior and the actual source aspect ratio.
5. Check track ordering, scene membership and timing.
6. Run [validation](https://docs.zvid.io/docs/validate-and-estimate/), inspect layout warnings and review a rendered result.