---
title: "Geometry"
description: "Position and size of elements."
---
import SC from '@slint/common-files/src/components/SC.astro';
import OnlyInSC from '@slint/common-files/src/components/OnlyInSC.astro';

<SC>
## Properties

Every element has the four geometry properties `x`, `y`, `width`, and `height`, of type `length`. \{#sls.geom.properties}

`x` and `y` are the offsets from the element's parent's top-left corner to the element's top-left corner.
`width` and `height` are the element's size, extending to the right and downwards from that corner. \{#sls.geom.relative}

The `x` and `y` properties of the root element are meaningless and shall not be used. \{#sls.geom.window.root}

<OnlyInSC>
The `width` and `height` of the root element are the size of the window, which the application gives the
component when it creates it. \{#sls.geom.window.size}

An expression may read them, so an element sizes itself against the window.
Binding any geometry property of the root element is an error: the size is the application's to give,
not the file's to set. \{#sls.geom.window}
</OnlyInSC>
</SC>

Binding `x` or `y` of the root element is deprecated.
The window size can be set through `width` and `height`.

<SC>
## Defaults

When `x` has no binding, it defaults to `(parent.width - self.width) / 2`,
and `y` to `(parent.height - self.height) / 2`:
the value that centers the element within its parent along that axis. \{#sls.geom.default-position}

When `width` or `height` has no binding, the default depends on the element type:
a `Rectangle` has the same width or height as its parent. \{#sls.geom.default-size}
</SC>

Elements inside a layout are positioned and sized by the layout instead of these defaults.

<SC>
In this example, both rectangles cover the whole window: \{#sls.geom.example.intro}

```slint
export component Example inherits Window {
    Rectangle {
        background: #2a6e3f;
        Rectangle {
        }
    }
}
```
</SC>

A binding of `width` or `height` that evaluates to a [percentage](../../property-types/numeric-types/#percent)
is relative to the parent's property of the same name:
`width: 50%;` is short for `width: parent.width * 50%;`.