textual/docs/styles/layer.md

Layer

The layer property is used to assign widgets to a layer. Layers control the order in which widgets are painted on screen. The value of the layer property must be the name of a layer defined using a layers declaration. More information on layers can be found in the guide.

Syntax

layer: <STRING>;

Example

In the example below, #box1 is yielded before #box2. However, since #box1 is on the higher layer, it is drawn on top of #box2.

=== "Output"

```{.textual path="docs/examples/guide/layout/layers.py"}
```

=== "layers.py"

```python
--8<-- "docs/examples/guide/layout/layers.py"
```

=== "layers.css"

```sass hl_lines="3 14 19"
--8<-- "docs/examples/guide/layout/layers.css"
```

CSS

/* Draw the widget on the layer called 'below' */
layer: below;

Python

# Draw the widget on the layer called 'below'
widget.styles.layer = "below"