z_index/
z_index.rs

1//! Demonstrates how to use the z-index component on UI nodes to control their relative depth
2//!
3//! It uses colored boxes with different z-index values to demonstrate how it can affect the order of
4//! depth of nodes compared to their siblings, but also compared to the entire UI.
5
6use bevy::{
7    color::palettes::basic::{BLUE, GRAY, LIME, PURPLE, RED, YELLOW},
8    prelude::*,
9};
10
11fn main() {
12    App::new()
13        .insert_resource(ClearColor(Color::BLACK))
14        .add_plugins(DefaultPlugins)
15        .add_systems(Startup, setup)
16        .run();
17}
18
19fn setup(mut commands: Commands) {
20    commands.spawn(Camera2d);
21
22    // spawn the container with default z-index.
23    // the default z-index value is `ZIndex(0)`.
24    // because this is a root UI node, using local or global values will do the same thing.
25    commands
26        .spawn(Node {
27            width: Val::Percent(100.),
28            height: Val::Percent(100.),
29            align_items: AlignItems::Center,
30            justify_content: JustifyContent::Center,
31            ..default()
32        })
33        .with_children(|parent| {
34            parent
35                .spawn((
36                    Node {
37                        width: Val::Px(180.0),
38                        height: Val::Px(100.0),
39                        ..default()
40                    },
41                    BackgroundColor(GRAY.into()),
42                ))
43                .with_children(|parent| {
44                    // spawn a node with default z-index.
45                    parent.spawn((
46                        Node {
47                            position_type: PositionType::Absolute,
48                            left: Val::Px(10.0),
49                            bottom: Val::Px(40.0),
50                            width: Val::Px(100.0),
51                            height: Val::Px(50.0),
52                            ..default()
53                        },
54                        BackgroundColor(RED.into()),
55                    ));
56
57                    // spawn a node with a positive local z-index of 2.
58                    // it will show above other nodes in the gray container.
59                    parent.spawn((
60                        Node {
61                            position_type: PositionType::Absolute,
62                            left: Val::Px(45.0),
63                            bottom: Val::Px(30.0),
64                            width: Val::Px(100.),
65                            height: Val::Px(50.),
66                            ..default()
67                        },
68                        ZIndex(2),
69                        BackgroundColor(BLUE.into()),
70                    ));
71
72                    // spawn a node with a negative local z-index.
73                    // it will show under other nodes in the gray container.
74                    parent.spawn((
75                        Node {
76                            position_type: PositionType::Absolute,
77                            left: Val::Px(70.0),
78                            bottom: Val::Px(20.0),
79                            width: Val::Px(100.),
80                            height: Val::Px(75.),
81                            ..default()
82                        },
83                        ZIndex(-1),
84                        BackgroundColor(LIME.into()),
85                    ));
86
87                    // spawn a node with a positive global z-index of 1.
88                    // it will show above all other nodes, because it's the highest global z-index in this example.
89                    // by default, boxes all share the global z-index of 0 that the gray container is added to.
90                    parent.spawn((
91                        Node {
92                            position_type: PositionType::Absolute,
93                            left: Val::Px(15.0),
94                            bottom: Val::Px(10.0),
95                            width: Val::Px(100.),
96                            height: Val::Px(60.),
97                            ..default()
98                        },
99                        BackgroundColor(PURPLE.into()),
100                        GlobalZIndex(1),
101                    ));
102
103                    // spawn a node with a negative global z-index of -1.
104                    // this will show under all other nodes including its parent, because it's the lowest global z-index
105                    // in this example.
106                    parent.spawn((
107                        Node {
108                            position_type: PositionType::Absolute,
109                            left: Val::Px(-15.0),
110                            bottom: Val::Px(-15.0),
111                            width: Val::Px(100.),
112                            height: Val::Px(125.),
113                            ..default()
114                        },
115                        BackgroundColor(YELLOW.into()),
116                        GlobalZIndex(-1),
117                    ));
118                });
119        });
120}
z_index/z_index.rs

z_index/
z_index.rs
