Why is my gizmo going behind other elements?

[bellwether-softworks]

First, what's happening now:

Instead, I want the gizmo (line) to be rendered over the text box. I was under the impression that this could be accomplished with the depth_bias = -1.0 assignment on my GizmoConfig, but in my app this seems to have no effect. This is occurring on v0.14.2. Any assistance would be appreciated in identifying what I'm doing wrong or need to adjust to make this work.

For reference, the below code was used to generate that screenshot:

use bevy::color::palettes::css::BLACK;
use bevy::prelude::*;
use bevy::render::view::RenderLayers;

fn main() {
    App::new()
        .add_plugins(DefaultPlugins)
        .add_systems(Startup, setup)
        .add_systems(Update, (
            render_gizmos,
        ))
        .run();
}

fn setup(
    mut commands: Commands,
    mut config_store: ResMut<GizmoConfigStore>,
) {
    let (config, _) = config_store.config_mut::<DefaultGizmoConfigGroup>();

    config.render_layers = RenderLayers::layer(1);
    config.depth_bias = -1.0;

    commands
        .spawn((
            NodeBundle {
                style: Style {
                    position_type: PositionType::Absolute,

                    top: Val::Px(20.0),
                    left: Val::Px(10.0),

                    flex_direction: FlexDirection::Row,
                    justify_content: JustifyContent::Center,
                    align_items: AlignItems::Center,

                    ..default()
                },
                ..default()
            },
        ))
        .with_children(|wrapper| {
            wrapper
                .spawn((
                    NodeBundle {
                        style: Style {
                            border: UiRect::all(Val::Px(1.0)),

                            flex_direction: FlexDirection::Row,
                            justify_content: JustifyContent::Center,
                            align_items: AlignItems::Center,
                            padding: UiRect::axes(Val::Px(3.0), Val::ZERO),

                            ..default()
                        },
                        border_color: BorderColor(Color::linear_rgb(1.0, 0.0, 1.0)),
                        background_color: BackgroundColor(Color::linear_rgb(1.0, 1.0, 0.0)),
                        ..default()
                    },
                    RenderLayers::layer(1),
                ))
                .with_children(|text_box| {
                    text_box.spawn((
                        TextBundle::from_section(
                            "AAA".to_string(),
                            TextStyle {
                                color: Color::BLACK,
                                ..default()
                            },
                        )
                            .with_style(Style { ..default() })
                            .with_text_justify(JustifyText::Left)
                            .with_no_wrap(),
                        RenderLayers::layer(1)
                    ));
                });
        });

    commands.spawn((
        Camera2dBundle {
            camera: Camera {
                clear_color: ClearColorConfig::Custom(Color::WHITE),
                ..default()
            },
            ..default()
        },
        RenderLayers::layer(1)
    ));
}

fn render_gizmos(
    camera_2d: Query<(&Camera, &GlobalTransform)>,
    mut gizmos: Gizmos,
) {
    let (camera, global_xform) = camera_2d.single();

    let start = camera.viewport_to_world(&global_xform, Vec2::new(0.0, 0.0)).expect("should have world position");
    let end = camera.viewport_to_world(&global_xform, Vec2::new(100.0, 100.0)).expect("should have world position");

    gizmos.line_2d(start.origin.xy(), end.origin.xy(), BLACK);
}

[tim-blackbird]

UI is rendered in a separate pass over everything else. There is no way to render on top of UI without a separate camera AFAIK.

depth_bias is already locked to -1. for 2D camera's. The setting has no effect there.