---
title: "Offset"
description: "The offset modifier lets us render views in a different position without modifying the surrounding layout."
url: https://www.swiftuifieldguide.com/layout/offset
markdown_url: https://www.swiftuifieldguide.com/layout/offset.md
---
> Convenience Markdown export of the HTML page. Interactive samples, diagrams, and visualizations stay on the canonical page.
# Offset

The offset modifier lets us change where a view is drawn without modifying the surrounding layout. As far as the view's parent is concerned, the view is still in its original position (we can see this by enabling the yellow border).

> Pretty-printed code from Sample0

```txt
HStack {
    Color.green
    Color.red
        .offset(x: , y: )
        /* .border(.yellow) */
    Color.blue
}
```

> Interactive example on HTML page: Sample0.

Because the offset modifier doesn't affect the frame, it's especially useful during animations and other effects. For example, if we use an [alignment guide](/layout/alignment) to move the red view above, the frame of the stack also changes:

> Pretty-printed code from Sample1

```txt
HStack {
    Color.green
    Color.red
        .alignmentGuide(
            VerticalAlignment.center
        ) { dim in (dim.height / 2) -  }
    Color.blue
}
```

> Interactive example on HTML page: Sample1.