Skip to content


The layers property allows you to define an ordered set of layers. These layers can later be referenced using the layer property. Layers control the order in which widgets are painted on screen. More information on layers can be found in the guide.


layers: <STRING> ...;


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

LayersExample box1 (layer = above) box2 (layer = below)

from import App, ComposeResult
from textual.widgets import Static

class LayersExample(App):
    CSS_PATH = "layers.css"

    def compose(self) -> ComposeResult:
        yield Static("box1 (layer = above)", id="box1")
        yield Static("box2 (layer = below)", id="box2")

if __name__ == "__main__":
    app = LayersExample()
Screen {
    align: center middle;
    layers: below above;

Static {
    width: 28;
    height: 8;
    color: auto;
    content-align: center middle;

#box1 {
    background: darkcyan;
    layer: above;

#box2 {
    layer: below;
    background: orange;
    offset: 12 6;


/* Bottom layer is called 'below', layer above it is called 'above' */
layers: below above;


# Bottom layer is called 'below', layer above it is called 'above'
widget.layers = ("below", "above")