Always spawn fps_overlay on top of everything (#12586)

# Objective

- Currently the fps_overlay affects any other ui node spawned. This
should not happen

## Solution

- Use position absolute and a ZIndex of `i32::MAX - 32`
- I also modified the example a little bit to center it correctly. It
only worked previously because the overlay was pushing it down. I also
took the opportunity to simplify the text spawning code a little bit.

crates/bevy_dev_tools/src/fps_overlay.rs

@@ -10,8 +10,18 @@ use bevy_ecs::{
     schedule::{common_conditions::resource_changed, IntoSystemConfigs},
     system::{Commands, Query, Res, Resource},
 };
+use bevy_hierarchy::BuildChildren;
 use bevy_text::{Font, Text, TextSection, TextStyle};
-use bevy_ui::node_bundles::TextBundle;
+use bevy_ui::{
+    node_bundles::{NodeBundle, TextBundle},
+    PositionType, Style, ZIndex,
+};
+use bevy_utils::default;
+
+/// Global [`ZIndex`] used to render the fps overlay.
+///
+/// We use a number slightly under `i32::MAX` so you can render on top of it if you really need to.
+pub const FPS_OVERLAY_ZINDEX: i32 = i32::MAX - 32;
 
 /// A plugin that adds an FPS overlay to the Bevy application.
 ///
@@ -67,13 +77,26 @@ impl Default for FpsOverlayConfig {
 struct FpsText;
 
 fn setup(mut commands: Commands, overlay_config: Res<FpsOverlayConfig>) {
-    commands.spawn((
+    commands
+        .spawn(NodeBundle {
+            style: Style {
+                // We need to make sure the overlay doesn't affect the position of other UI nodes
+                position_type: PositionType::Absolute,
+                ..default()
+            },
+            // Render overlay on top of everything
+            z_index: ZIndex::Global(FPS_OVERLAY_ZINDEX),
+            ..default()
+        })
+        .with_children(|c| {
+            c.spawn((
                 TextBundle::from_sections([
                     TextSection::new("FPS: ", overlay_config.text_config.clone()),
                     TextSection::from_style(overlay_config.text_config.clone()),
                 ]),
                 FpsText,
             ));
+        });
 }
 
 fn update_text(diagnostic: Res<DiagnosticsStore>, mut query: Query<&mut Text, With<FpsText>>) {

examples/dev_tools/fps_overlay.rs

@@ -28,30 +28,33 @@ fn main() {
 }
 
 fn setup(mut commands: Commands) {
-    // We need to spawn camera to see overlay
+    // We need to spawn a camera (2d or 3d) to see the overlay
     commands.spawn(Camera2dBundle::default());
-    commands.spawn(
-        TextBundle::from_sections([
-            TextSection::new(
-                "Press 1 to change color of the overlay.",
+
+    // Instruction text
+    commands
+        .spawn(NodeBundle {
+            style: Style {
+                width: Val::Percent(100.0),
+                height: Val::Percent(100.0),
+                align_items: AlignItems::Center,
+                justify_content: JustifyContent::Center,
+                ..default()
+            },
+            ..default()
+        })
+        .with_children(|c| {
+            c.spawn(TextBundle::from_section(
+                concat!(
+                    "Press 1 to change color of the overlay.\n",
+                    "Press 2 to change size of the overlay."
+                ),
                 TextStyle {
                     font_size: 25.0,
                     ..default()
                 },
-            ),
-            TextSection::new(
-                "\nPress 2 to change size of the overlay",
-                TextStyle {
-                    font_size: 25.0,
-                    ..default()
-                },
-            ),
-        ])
-        .with_style(Style {
-            justify_self: JustifySelf::Center,
-            ..default()
-        }),
-    );
+            ));
+        });
 }
 
 fn customize_config(input: Res<ButtonInput<KeyCode>>, mut overlay: ResMut<FpsOverlayConfig>) {