---
title: "PositionPreset"
canonical_url: https://docs.zvid.io/docs/structure/properties/position/
source: docs/structure/properties/position.md
content_revision: 6338386a1dd87e4a
---

# PositionPreset

`position` places an element on the canvas using a preset. When `position` is not `custom`, Zvid calculates `x` and `y` from the project dimensions and item dimensions. If no explicit `anchor` is set, Zvid uses the same value as the non-custom `position`.

Default: `custom`. Non-custom presets override authored `x` and `y`, so adding
`x: 40` to `position: "bottom-right"` does not create a 40-pixel margin.
For an inset, use custom coordinates and an appropriate `anchor`; see
[Layout](https://docs.zvid.io/docs/concepts/layout/).

```typescript
type PositionPreset =
  | "top-left"
  | "top-center"
  | "top-right"
  | "center-left"
  | "center-center"
  | "center-right"
  | "bottom-left"
  | "bottom-center"
  | "bottom-right"
  | "custom";
```

| Value           | Placement                       |
| --------------- | ------------------------------- |
| `top-left`      | Top-left corner                 |
| `top-center`    | Top edge, centered              |
| `top-right`     | Top-right corner                |
| `center-left`   | Left edge, vertically centered  |
| `center-center` | Center of the canvas            |
| `center-right`  | Right edge, vertically centered |
| `bottom-left`   | Bottom-left corner              |
| `bottom-center` | Bottom edge, centered           |
| `bottom-right`  | Bottom-right corner             |
| `custom`        | Use explicit `x` and `y`        |

## Example

Visual element fragment for `payload.visuals`:

```json
{
  "type": "TEXT",
  "text": "Centered",
  "position": "center-center"
}
```

## Used By

- [Text & HTML Elements](https://docs.zvid.io/docs/structure/text-elements/)
- [Image Elements](https://docs.zvid.io/docs/structure/image-elements/)
- [Video Elements](https://docs.zvid.io/docs/structure/video-elements/)
- [GIF Elements](https://docs.zvid.io/docs/structure/gif-elements/)
- [SVG Elements (deprecated)](https://docs.zvid.io/docs/structure/svg-elements/)