ContextQMD
Back to Textual

Layer

docs/styles/layer.md

8.2.51.5 KB
Original Source

Layer

The layer style defines the layer a widget belongs to.

Syntax

--8<-- "docs/snippets/syntax_block_start.md" layer: <a href="../../css_types/name"><name></a>; --8<-- "docs/snippets/syntax_block_end.md"

The layer style accepts a <name> that defines the layer this widget belongs to. This <name> must correspond to a <name> that has been defined in a layers style by an ancestor of this widget.

More information on layers can be found in the guide.

!!! warning

Using a `<name>` that hasn't been defined in a [`layers`](./layers.md) declaration of an ancestor of this widget has no effect.

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.tcss"

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

CSS

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

Python

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

See also