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: percent(100),
28            height: 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: px(180),
38                        height: px(100),
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: px(10),
49                            bottom: px(40),
50                            width: px(100),
51                            height: px(50),
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: px(45),
63                            bottom: px(30),
64                            width: px(100),
65                            height: 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: px(70),
78                            bottom: px(20),
79                            width: px(100),
80                            height: 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: px(15),
94                            bottom: px(10),
95                            width: px(100),
96                            height: 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: px(-15),
110                            bottom: px(-15),
111                            width: px(100),
112                            height: 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
