diff --git a/crates/bevy_ecs/src/core/filter.rs b/crates/bevy_ecs/src/core/filter.rs
index 65e01f4d58762..3ed6b5197ef39 100644
--- a/crates/bevy_ecs/src/core/filter.rs
+++ b/crates/bevy_ecs/src/core/filter.rs
@@ -29,6 +29,8 @@ impl EntityFilter for AnyEntityFilter {
 
 pub struct Or<T>(pub T);
 
+pub struct Not<T>(pub T);
+
 /// Query transformer that retrieves components of type `T` that have been mutated since the start of the frame.
 /// Added components do not count as mutated.
 pub struct Mutated<T>(NonNull<ComponentFlags>, PhantomData<T>);
@@ -270,3 +272,23 @@ impl_query_filter_tuple!(A, B, C, D, E, F, G, H, I, J, K, L, M);
 impl_query_filter_tuple!(A, B, C, D, E, F, G, H, I, J, K, L, M, N);
 impl_query_filter_tuple!(A, B, C, D, E, F, G, H, I, J, K, L, M, N, O);
 impl_query_filter_tuple!(A, B, C, D, E, F, G, H, I, J, K, L, M, N, O, P);
+
+impl<T: QueryFilter> QueryFilter for Not<T> {
+    type EntityFilter = Not<T::EntityFilter>;
+
+    fn access() -> QueryAccess {
+        T::access()
+    }
+
+    fn get_entity_filter(archetype: &Archetype) -> Option<Self::EntityFilter> {
+        T::get_entity_filter(archetype).map(Not)
+    }
+}
+
+impl<T: EntityFilter> EntityFilter for Not<T> {
+    const DANGLING: Self = Not(T::DANGLING);
+
+    unsafe fn matches_entity(&self, offset: usize) -> bool {
+        !self.0.matches_entity(offset)
+    }
+}
diff --git a/crates/bevy_ecs/src/core/mod.rs b/crates/bevy_ecs/src/core/mod.rs
index 512bb10e48819..7013edf6d3088 100644
--- a/crates/bevy_ecs/src/core/mod.rs
+++ b/crates/bevy_ecs/src/core/mod.rs
@@ -50,7 +50,7 @@ pub use bundle::{Bundle, DynamicBundle, MissingComponent};
 pub use entities::{Entity, EntityReserver, Location, NoSuchEntity};
 pub use entity_builder::{BuiltEntity, EntityBuilder};
 pub use entity_map::*;
-pub use filter::{Added, Changed, EntityFilter, Mutated, Or, QueryFilter, With, Without};
+pub use filter::{Added, Changed, EntityFilter, Mutated, Not, Or, QueryFilter, With, Without};
 pub use query::{Batch, BatchedIter, Flags, Mut, QueryIter, ReadOnlyFetch, WorldQuery};
 pub use world::{ArchetypesGeneration, Component, ComponentError, SpawnBatchIter, World};
 pub use world_builder::*;
diff --git a/crates/bevy_ecs/src/lib.rs b/crates/bevy_ecs/src/lib.rs
index 70be39c666110..d0910feaa3c5d 100644
--- a/crates/bevy_ecs/src/lib.rs
+++ b/crates/bevy_ecs/src/lib.rs
@@ -16,7 +16,7 @@ pub mod prelude {
         resource::{ChangedRes, FromResources, Local, Res, ResMut, Resource, Resources},
         schedule::{Schedule, State, StateStage, SystemStage},
         system::{Commands, IntoSystem, Query, System},
-        Added, Bundle, Changed, Component, Entity, Flags, In, IntoChainSystem, Mut, Mutated, Or,
-        QuerySet, Ref, RefMut, With, Without, World,
+        Added, Bundle, Changed, Component, Entity, Flags, In, IntoChainSystem, Mut, Mutated, Not,
+        Or, QuerySet, Ref, RefMut, With, Without, World,
     };
 }
diff --git a/crates/bevy_ui/src/flex/convert.rs b/crates/bevy_ui/src/flex/convert.rs
index 43bb7c839c0cb..4bfbeedd66204 100644
--- a/crates/bevy_ui/src/flex/convert.rs
+++ b/crates/bevy_ui/src/flex/convert.rs
@@ -4,37 +4,31 @@ use crate::{
 };
 use bevy_math::{Rect, Size};
 
-pub fn from_rect(
-    scale_factor: f64,
-    rect: Rect<Val>,
-) -> stretch::geometry::Rect<stretch::style::Dimension> {
+pub fn from_rect(rect: Rect<Val>) -> stretch::geometry::Rect<stretch::style::Dimension> {
     stretch::geometry::Rect {
-        start: from_val(scale_factor, rect.left),
-        end: from_val(scale_factor, rect.right),
+        start: rect.left.into(),
+        end: rect.right.into(),
         // NOTE: top and bottom are intentionally flipped. stretch has a flipped y-axis
-        top: from_val(scale_factor, rect.bottom),
-        bottom: from_val(scale_factor, rect.top),
+        top: rect.bottom.into(),
+        bottom: rect.top.into(),
     }
 }
 
-pub fn from_f32_size(scale_factor: f64, size: Size<f32>) -> stretch::geometry::Size<f32> {
+pub fn from_f32_size(size: Size<f32>) -> stretch::geometry::Size<f32> {
     stretch::geometry::Size {
-        width: (scale_factor * size.width as f64) as f32,
-        height: (scale_factor * size.height as f64) as f32,
+        width: size.width,
+        height: size.height,
     }
 }
 
-pub fn from_val_size(
-    scale_factor: f64,
-    size: Size<Val>,
-) -> stretch::geometry::Size<stretch::style::Dimension> {
+pub fn from_val_size(size: Size<Val>) -> stretch::geometry::Size<stretch::style::Dimension> {
     stretch::geometry::Size {
-        width: from_val(scale_factor, size.width),
-        height: from_val(scale_factor, size.height),
+        width: size.width.into(),
+        height: size.height.into(),
     }
 }
 
-pub fn from_style(scale_factor: f64, value: &Style) -> stretch::style::Style {
+pub fn from_style(value: &Style) -> stretch::style::Style {
     stretch::style::Style {
         overflow: stretch::style::Overflow::Visible,
         display: value.display.into(),
@@ -46,16 +40,16 @@ pub fn from_style(scale_factor: f64, value: &Style) -> stretch::style::Style {
         align_self: value.align_self.into(),
         align_content: value.align_content.into(),
         justify_content: value.justify_content.into(),
-        position: from_rect(scale_factor, value.position),
-        margin: from_rect(scale_factor, value.margin),
-        padding: from_rect(scale_factor, value.padding),
-        border: from_rect(scale_factor, value.border),
+        position: from_rect(value.position),
+        margin: from_rect(value.margin),
+        padding: from_rect(value.padding),
+        border: from_rect(value.border),
         flex_grow: value.flex_grow,
         flex_shrink: value.flex_shrink,
-        flex_basis: from_val(scale_factor, value.flex_basis),
-        size: from_val_size(scale_factor, value.size),
-        min_size: from_val_size(scale_factor, value.min_size),
-        max_size: from_val_size(scale_factor, value.max_size),
+        flex_basis: value.flex_basis.into(),
+        size: from_val_size(value.size),
+        min_size: from_val_size(value.min_size),
+        max_size: from_val_size(value.max_size),
         aspect_ratio: match value.aspect_ratio {
             Some(value) => stretch::number::Number::Defined(value),
             None => stretch::number::Number::Undefined,
@@ -63,12 +57,14 @@ pub fn from_style(scale_factor: f64, value: &Style) -> stretch::style::Style {
     }
 }
 
-pub fn from_val(scale_factor: f64, val: Val) -> stretch::style::Dimension {
-    match val {
-        Val::Auto => stretch::style::Dimension::Auto,
-        Val::Percent(value) => stretch::style::Dimension::Percent(value / 100.0),
-        Val::Px(value) => stretch::style::Dimension::Points((scale_factor * value as f64) as f32),
-        Val::Undefined => stretch::style::Dimension::Undefined,
+impl From<Val> for stretch::style::Dimension {
+    fn from(val: Val) -> Self {
+        match val {
+            Val::Auto => stretch::style::Dimension::Auto,
+            Val::Percent(value) => stretch::style::Dimension::Percent(value / 100.0),
+            Val::Px(value) => stretch::style::Dimension::Points(value),
+            Val::Undefined => stretch::style::Dimension::Undefined,
+        }
     }
 }
 
diff --git a/crates/bevy_ui/src/flex/mod.rs b/crates/bevy_ui/src/flex/mod.rs
index b32675534eb78..c2c66fcf06bd7 100644
--- a/crates/bevy_ui/src/flex/mod.rs
+++ b/crates/bevy_ui/src/flex/mod.rs
@@ -1,21 +1,29 @@
 mod convert;
 
-use crate::{Node, Style};
+use crate::{Node, Style, ZIndex};
+
 use bevy_app::EventReader;
-use bevy_ecs::{Changed, Entity, Flags, Query, QueryFilter, Res, ResMut, With, Without};
-use bevy_log::warn;
+use bevy_ecs::{Added, Changed, Entity, Mutated, Not, Or, Query, QuerySet, Res, ResMut, With};
+use bevy_log::{trace, warn};
+
 use bevy_math::Vec2;
+
 use bevy_text::CalculatedSize;
-use bevy_transform::prelude::{Children, Parent, Transform};
+use bevy_transform::{
+    components::GlobalTransform,
+    prelude::{Children, Parent, Transform},
+};
 use bevy_utils::HashMap;
-use bevy_window::{Window, WindowId, WindowScaleFactorChanged, Windows};
-use std::fmt;
+use bevy_window::{Window, WindowId, WindowResized, Windows};
+use std::{collections::hash_map::Entry, fmt};
 use stretch::{number::Number, Stretch};
 
 pub struct FlexSurface {
     entity_to_stretch: HashMap<Entity, stretch::node::Node>,
-    window_nodes: HashMap<WindowId, stretch::node::Node>,
+    window_nodes: WindowNodes,
     stretch: Stretch,
+    stacking_contexts: HashMap<Entity, StackingContext>,
+    root_stacking_context: StackingContext,
 }
 
 impl fmt::Debug for FlexSurface {
@@ -33,260 +41,844 @@ impl Default for FlexSurface {
             entity_to_stretch: Default::default(),
             window_nodes: Default::default(),
             stretch: Stretch::new(),
+            stacking_contexts: Default::default(),
+            root_stacking_context: Default::default(),
         }
     }
 }
 
-impl FlexSurface {
-    pub fn upsert_node(&mut self, entity: Entity, style: &Style, scale_factor: f64) {
-        let mut added = false;
-        let stretch = &mut self.stretch;
-        let stretch_style = convert::from_style(scale_factor, style);
-        let stretch_node = self.entity_to_stretch.entry(entity).or_insert_with(|| {
-            added = true;
-            stretch.new_node(stretch_style, Vec::new()).unwrap()
-        });
-
-        if !added {
-            self.stretch
-                .set_style(*stretch_node, stretch_style)
-                .unwrap();
+#[derive(Debug, Default)]
+struct WindowNodes {
+    map: HashMap<Entity, stretch::node::Node>,
+    dirty: bool,
+}
+
+#[derive(Debug, Default)]
+struct StackingContext {
+    // The root stacking context does not have a root entity
+    root_entity: Option<Entity>,
+    context: Vec<(Entity, i16)>,
+    updated: bool,
+}
+
+#[derive(Default, Debug)]
+pub struct NodeWindowId(pub WindowId);
+
+// SAFE: as long as MeasureFunc is Send + Sync. https://github.com/vislyhq/stretch/issues/69
+unsafe impl Send for FlexSurface {}
+unsafe impl Sync for FlexSurface {}
+
+#[allow(clippy::too_many_arguments)]
+pub fn layout_system(
+    mut flex_surface: ResMut<FlexSurface>,
+    changed_style_query: Query<(Entity, &Style, Option<&CalculatedSize>), Changed<Style>>,
+    mutated_size_query: Query<
+        (Entity, &CalculatedSize),
+        (With<Style>, Mutated<CalculatedSize>, Not<Changed<Style>>),
+    >,
+    mutated_children_query: Query<
+        (Entity, &Children),
+        (With<Style>, Or<(Added<Style>, Changed<Children>)>),
+    >,
+    windows: Res<Windows>,
+    new_window_nodes_query: Query<
+        (Entity, &Style, Option<&NodeWindowId>),
+        Or<(Added<Style>, Changed<Parent>, Changed<NodeWindowId>)>,
+    >,
+    mut window_resized_events: EventReader<WindowResized>,
+    window_id_query: Query<&NodeWindowId, With<Style>>,
+    style_query: Query<(
+        &Style,
+        Option<&Parent>,
+        Option<&Children>,
+        Option<&NodeWindowId>,
+    )>,
+    mut transform_queries: QuerySet<(
+        Query<(Entity, &mut Node, &mut Transform, Option<&Parent>)>,
+        Query<(&mut Transform, &mut GlobalTransform, Option<&Parent>), With<Style>>,
+    )>,
+    changed_zindex_query: Query<
+        Entity,
+        (
+            With<Style>,
+            Or<(Changed<Style>, Changed<Parent>, Changed<Children>)>,
+        ),
+    >,
+) {
+    trace!("Start of layout_system");
+    let mut dirty_layout = false;
+    let flex_surface = &mut *flex_surface;
+
+    garbage_collection(flex_surface, &style_query);
+    upsert_node_styles(flex_surface, &mut dirty_layout, &changed_style_query);
+    update_node_sizes(flex_surface, &mut dirty_layout, &mutated_size_query);
+    update_node_children(
+        flex_surface,
+        &mut dirty_layout,
+        &mutated_children_query,
+        &style_query,
+    );
+    upsert_window_nodes(
+        flex_surface,
+        &mut dirty_layout,
+        &windows,
+        &new_window_nodes_query,
+        &style_query,
+    );
+    update_window_sizes(
+        flex_surface,
+        &mut dirty_layout,
+        &*windows,
+        &mut window_resized_events,
+        &window_id_query,
+    );
+    if dirty_layout {
+        compute_window_node_layouts(flex_surface);
+        update_transforms_xy(flex_surface, &style_query, &mut transform_queries.q0_mut());
+    }
+    update_transforms_z(
+        flex_surface,
+        &changed_zindex_query,
+        &style_query,
+        &mut transform_queries.q1_mut(),
+    );
+}
+
+fn upsert_node_styles(
+    flex_surface: &mut FlexSurface,
+    dirty_layout: &mut bool,
+    changed_style_query: &Query<(Entity, &Style, Option<&CalculatedSize>), Changed<Style>>,
+) {
+    for (entity, style, size) in changed_style_query.iter() {
+        *dirty_layout = true;
+        match flex_surface.entity_to_stretch.entry(entity) {
+            Entry::Occupied(entry) => {
+                trace!("Updating style for {:?}", entity);
+                flex_surface
+                    .stretch
+                    .set_style(*entry.get(), convert::from_style(style))
+                    .unwrap();
+            }
+            Entry::Vacant(entry) => {
+                trace!("Inserting stretch node for: {:?}", entity);
+                let stretch_style = convert::from_style(&style);
+                let node = if let Some(&size) = size {
+                    let measure = Box::new(move |constraints| Ok(leaf_measure(constraints, size)));
+                    flex_surface
+                        .stretch
+                        .new_leaf(stretch_style, measure)
+                        .unwrap()
+                } else {
+                    flex_surface
+                        .stretch
+                        .new_node(stretch_style, Vec::new())
+                        .unwrap()
+                };
+                entry.insert(node);
+            }
         }
     }
+}
 
-    pub fn upsert_leaf(
-        &mut self,
-        entity: Entity,
-        style: &Style,
-        calculated_size: CalculatedSize,
-        scale_factor: f64,
-    ) {
-        let stretch = &mut self.stretch;
-        let stretch_style = convert::from_style(scale_factor, style);
-        let measure = Box::new(move |constraints: stretch::geometry::Size<Number>| {
-            let mut size = convert::from_f32_size(scale_factor, calculated_size.size);
-            match (constraints.width, constraints.height) {
-                (Number::Undefined, Number::Undefined) => {}
-                (Number::Defined(width), Number::Undefined) => {
-                    size.height = width * size.height / size.width;
-                    size.width = width;
-                }
-                (Number::Undefined, Number::Defined(height)) => {
-                    size.width = height * size.width / size.height;
-                    size.height = height;
-                }
-                (Number::Defined(width), Number::Defined(height)) => {
-                    size.width = width;
-                    size.height = height;
+fn leaf_measure(
+    constraints: stretch::geometry::Size<Number>,
+    size: CalculatedSize,
+) -> stretch::geometry::Size<f32> {
+    let mut size = convert::from_f32_size(size.size);
+    match (constraints.width, constraints.height) {
+        (Number::Undefined, Number::Undefined) => {}
+        (Number::Defined(width), Number::Undefined) => {
+            size.height = width * size.height / size.width;
+            size.width = width;
+        }
+        (Number::Undefined, Number::Defined(height)) => {
+            size.width = height * size.width / size.height;
+            size.height = height;
+        }
+        (Number::Defined(width), Number::Defined(height)) => {
+            size.width = width;
+            size.height = height;
+        }
+    }
+    size
+}
+
+fn update_node_sizes(
+    flex_surface: &mut FlexSurface,
+    dirty_layout: &mut bool,
+    mutated_size_query: &Query<
+        (Entity, &CalculatedSize),
+        (With<Style>, Mutated<CalculatedSize>, Not<Changed<Style>>),
+    >,
+) {
+    for (entity, &size) in mutated_size_query.iter() {
+        trace!("Updating size for {:?}", entity);
+        *dirty_layout = true;
+        let node = flex_surface.entity_to_stretch.get(&entity).unwrap();
+        let measure = Box::new(move |constraints| Ok(leaf_measure(constraints, size)));
+        flex_surface
+            .stretch
+            .set_measure(*node, Some(measure))
+            .unwrap();
+    }
+    for entity in mutated_size_query.removed::<CalculatedSize>().iter() {
+        trace!("Removing size for {:?}", entity);
+        *dirty_layout = true;
+        if let Some(node) = flex_surface.entity_to_stretch.get(&entity) {
+            flex_surface.stretch.set_measure(*node, None).unwrap();
+        }
+    }
+}
+
+fn update_node_children(
+    flex_surface: &mut FlexSurface,
+    dirty_layout: &mut bool,
+    mutated_children_query: &Query<
+        (Entity, &Children),
+        (With<Style>, Or<(Added<Style>, Changed<Children>)>),
+    >,
+    style_query: &Query<(
+        &Style,
+        Option<&Parent>,
+        Option<&Children>,
+        Option<&NodeWindowId>,
+    )>,
+) {
+    for (entity, children) in mutated_children_query.iter() {
+        trace!("Updating children for: {:?}", entity);
+        *dirty_layout = true;
+        let parent_node = flex_surface.entity_to_stretch.get(&entity).unwrap();
+        let children_nodes = children
+            .iter()
+            .filter_map(|child| {
+                if !is_root_node(*child, style_query) {
+                    flex_surface.entity_to_stretch.get(&child).copied()
+                } else {
+                    None
                 }
-            }
-            Ok(size)
-        });
+            })
+            .collect();
+        flex_surface
+            .stretch
+            .set_children(*parent_node, children_nodes)
+            .unwrap();
+    }
+}
 
-        if let Some(stretch_node) = self.entity_to_stretch.get(&entity) {
-            self.stretch
-                .set_style(*stretch_node, stretch_style)
-                .unwrap();
-            self.stretch
-                .set_measure(*stretch_node, Some(measure))
-                .unwrap();
+fn upsert_window_nodes(
+    flex_surface: &mut FlexSurface,
+    dirty_layout: &mut bool,
+    windows: &Windows,
+    new_window_nodes_query: &Query<
+        (Entity, &Style, Option<&NodeWindowId>),
+        Or<(Added<Style>, Changed<Parent>, Changed<NodeWindowId>)>,
+    >,
+    style_query: &Query<(
+        &Style,
+        Option<&Parent>,
+        Option<&Children>,
+        Option<&NodeWindowId>,
+    )>,
+) {
+    let stretch = &mut flex_surface.stretch;
+    let window_nodes_map = &mut flex_surface.window_nodes.map;
+    let window_nodes_dirty = &mut flex_surface.window_nodes.dirty;
+    window_nodes_map.retain(|entity, window_node| {
+        if is_root_node(*entity, style_query) {
+            true
         } else {
-            let stretch_node = stretch.new_leaf(stretch_style, measure).unwrap();
-            self.entity_to_stretch.insert(entity, stretch_node);
+            trace!("Removing window node for: {:?}", entity);
+            stretch.remove(*window_node);
+            *window_nodes_dirty = true;
+            false
         }
-    }
+    });
 
-    pub fn update_children(&mut self, entity: Entity, children: &Children) {
-        let mut stretch_children = Vec::with_capacity(children.len());
-        for child in children.iter() {
-            if let Some(stretch_node) = self.entity_to_stretch.get(child) {
-                stretch_children.push(*stretch_node);
-            } else {
-                warn!(
-                    "Unstyled child in a UI entity hierarchy. You are using an entity \
-without UI components as a child of an entity with UI components, results may be unexpected."
+    for (entity, _style, node_window_id) in new_window_nodes_query.iter() {
+        if is_root_node(entity, style_query) {
+            *dirty_layout = true;
+            let window = if let Some(node_window_id) = node_window_id {
+                trace!(
+                    "Adding window node for: {:?} on {:?}",
+                    entity,
+                    node_window_id.0
                 );
+                windows.get(node_window_id.0).unwrap()
+            } else {
+                trace!("Adding window node for: {:?} on primary window", entity);
+                windows.get_primary().unwrap()
+            };
+            let entity_node = flex_surface.entity_to_stretch.get(&entity).unwrap();
+
+            let window_node = stretch
+                .new_node(Default::default(), vec![*entity_node])
+                .unwrap();
+            set_window_node_style(stretch, window_node, window);
+            if let Some(previous) = flex_surface.window_nodes.map.insert(entity, window_node) {
+                warn!("Repacing UI window node for: {:?}", entity);
+                stretch.remove(previous);
             }
+            flex_surface.window_nodes.dirty = true;
         }
+    }
+}
 
-        let stretch_node = self.entity_to_stretch.get(&entity).unwrap();
-        self.stretch
-            .set_children(*stretch_node, stretch_children)
-            .unwrap();
+fn is_root_node(
+    entity: Entity,
+    query: &Query<(
+        &Style,
+        Option<&Parent>,
+        Option<&Children>,
+        Option<&NodeWindowId>,
+    )>,
+) -> bool {
+    // Entities with NodeWindowId are explicit roots
+    if query.get_component::<NodeWindowId>(entity).is_ok() {
+        return true;
     }
+    // Otherwise, a root has no parent or its parent has no Style
+    query
+        .get_component::<Parent>(entity)
+        .map(|parent| query.get(**parent).is_err())
+        .unwrap_or(true)
+}
 
-    pub fn update_window(&mut self, window: &Window) {
-        let stretch = &mut self.stretch;
-        let node = self.window_nodes.entry(window.id()).or_insert_with(|| {
-            stretch
-                .new_node(stretch::style::Style::default(), Vec::new())
-                .unwrap()
-        });
-
-        stretch
-            .set_style(
-                *node,
-                stretch::style::Style {
-                    size: stretch::geometry::Size {
-                        width: stretch::style::Dimension::Points(window.physical_width() as f32),
-                        height: stretch::style::Dimension::Points(window.physical_height() as f32),
-                    },
-                    ..Default::default()
+fn set_window_node_style(stretch: &mut Stretch, window_node: stretch::node::Node, window: &Window) {
+    stretch
+        .set_style(
+            window_node,
+            stretch::style::Style {
+                size: stretch::geometry::Size {
+                    width: stretch::style::Dimension::Points(window.physical_width() as f32),
+                    height: stretch::style::Dimension::Points(window.physical_height() as f32),
                 },
-            )
-            .unwrap();
+                ..Default::default()
+            },
+        )
+        .unwrap();
+}
+
+fn update_window_sizes(
+    flex_surface: &mut FlexSurface,
+    dirty_layout: &mut bool,
+    windows: &Windows,
+    window_resized_events: &mut EventReader<WindowResized>,
+    window_id_query: &Query<&NodeWindowId, With<Style>>,
+) {
+    for event in window_resized_events.iter() {
+        let resized_window_id = event.id;
+        for (entity, window_node) in flex_surface.window_nodes.map.iter() {
+            let entity_window_id = window_id_query
+                .get(*entity)
+                .map(|node_window_id| node_window_id.0)
+                .unwrap_or_else(|_| (windows.get_primary().unwrap().id()));
+            if resized_window_id == entity_window_id {
+                trace!(
+                    "Rescaling window node for {:?} ({:?})",
+                    entity,
+                    resized_window_id
+                );
+                *dirty_layout = true;
+                set_window_node_style(
+                    &mut flex_surface.stretch,
+                    *window_node,
+                    windows.get(resized_window_id).unwrap(),
+                );
+            }
+        }
     }
+}
 
-    pub fn set_window_children(
-        &mut self,
-        window_id: WindowId,
-        children: impl Iterator<Item = Entity>,
-    ) {
-        let stretch_node = self.window_nodes.get(&window_id).unwrap();
-        let child_nodes = children
-            .map(|e| *self.entity_to_stretch.get(&e).unwrap())
-            .collect::<Vec<stretch::node::Node>>();
-        self.stretch
-            .set_children(*stretch_node, child_nodes)
+fn compute_window_node_layouts(flex_surface: &mut FlexSurface) {
+    for (entity, window_node) in flex_surface.window_nodes.map.iter() {
+        trace!("Computing layout for window node {:?}", entity);
+        flex_surface
+            .stretch
+            .compute_layout(*window_node, stretch::geometry::Size::undefined())
             .unwrap();
     }
+}
 
-    pub fn compute_window_layouts(&mut self) {
-        for window_node in self.window_nodes.values() {
-            self.stretch
-                .compute_layout(*window_node, stretch::geometry::Size::undefined())
-                .unwrap();
-        }
-    }
+fn update_transforms_xy(
+    flex_surface: &mut FlexSurface,
+    style_query: &Query<(
+        &Style,
+        Option<&Parent>,
+        Option<&Children>,
+        Option<&NodeWindowId>,
+    )>,
+    transform_query: &mut Query<(Entity, &mut Node, &mut Transform, Option<&Parent>)>,
+) {
+    trace!("Updating xy transforms");
+    for (entity, mut node, mut transform, parent) in transform_query.iter_mut() {
+        let stretch_node = flex_surface.entity_to_stretch.get(&entity).unwrap();
+        let layout = flex_surface.stretch.layout(*stretch_node).unwrap();
+        node.size = Vec2::new(layout.size.width, layout.size.height);
 
-    pub fn get_layout(&self, entity: Entity) -> Result<&stretch::result::Layout, FlexError> {
-        if let Some(stretch_node) = self.entity_to_stretch.get(&entity) {
-            self.stretch
-                .layout(*stretch_node)
-                .map_err(FlexError::StretchError)
-        } else {
-            warn!(
-                "Styled child in a non-UI entity hierarchy. You are using an entity \
-with UI components as a child of an entity without UI components, results may be unexpected."
-            );
-            Err(FlexError::InvalidHierarchy)
+        let position = &mut transform.translation;
+        position.x = layout.location.x + layout.size.width / 2.0;
+        position.y = layout.location.y + layout.size.height / 2.0;
+
+        if let Some(parent) = parent {
+            if !is_root_node(entity, style_query) {
+                let stretch_node = flex_surface.entity_to_stretch.get(&**parent).unwrap();
+                let parent_layout = flex_surface.stretch.layout(*stretch_node).unwrap();
+
+                position.x -= parent_layout.size.width / 2.0;
+                position.y -= parent_layout.size.height / 2.0;
+            }
         }
     }
 }
 
-#[derive(Debug)]
-pub enum FlexError {
-    InvalidHierarchy,
-    StretchError(stretch::Error),
+// This should be run after transform_propagate_system and before drawing to properly place embedded window nodes
+pub fn window_nodes_transform_system(
+    flex_surface: ResMut<FlexSurface>,
+    mut transform_query: Query<(&mut Transform, &mut GlobalTransform, Option<&Parent>)>,
+    changed_parent_query: Query<(), Changed<GlobalTransform>>,
+) {
+    for &entity in flex_surface.window_nodes.map.keys() {
+        let (transform, mut global_transform, parent) = transform_query.get_mut(entity).unwrap();
+        if let Some(parent) = parent {
+            if changed_parent_query.get(**parent).is_ok() {
+                trace!(
+                    "Updating GlobalTransform for embedded window node {:?}",
+                    entity
+                );
+                // A root window node's Transform is absolute
+                *global_transform = GlobalTransform::from(*transform);
+            }
+        }
+    }
 }
 
-// SAFE: as long as MeasureFunc is Send + Sync. https://github.com/vislyhq/stretch/issues/69
-unsafe impl Send for FlexSurface {}
-unsafe impl Sync for FlexSurface {}
-
-#[allow(clippy::too_many_arguments)]
-pub fn flex_node_system(
-    windows: Res<Windows>,
-    mut scale_factor_events: EventReader<WindowScaleFactorChanged>,
-    mut flex_surface: ResMut<FlexSurface>,
-    root_node_query: Query<Entity, (With<Node>, Without<Parent>)>,
-    node_query: Query<(Entity, &Style, Option<&CalculatedSize>), (With<Node>, Changed<Style>)>,
-    full_node_query: Query<(Entity, &Style, Option<&CalculatedSize>), With<Node>>,
-    changed_size_query: Query<
-        (Entity, &Style, &CalculatedSize),
-        (With<Node>, Changed<CalculatedSize>),
-    >,
-    children_query: Query<(Entity, &Children), (With<Node>, Changed<Children>)>,
-    mut node_transform_query: Query<(
+pub fn update_transforms_z(
+    flex_surface: &mut FlexSurface,
+    changed_zindex_query: &Query<
         Entity,
-        &mut Node,
-        &mut Transform,
+        (
+            With<Style>,
+            Or<(Changed<Style>, Changed<Parent>, Changed<Children>)>,
+        ),
+    >,
+    style_query: &Query<(
+        &Style,
         Option<&Parent>,
-        Flags<Parent>,
-        Flags<Transform>,
+        Option<&Children>,
+        Option<&NodeWindowId>,
     )>,
+    transform_query: &mut Query<
+        (&mut Transform, &mut GlobalTransform, Option<&Parent>),
+        With<Style>,
+    >,
 ) {
-    // update window root nodes
-    for window in windows.iter() {
-        flex_surface.update_window(window);
+    // Update the root stacking context if window nodes were added/removed, or if any window node has changed
+    let mut dirty = flex_surface.window_nodes.dirty;
+    flex_surface.window_nodes.dirty = false;
+    for &entity in flex_surface.window_nodes.map.keys() {
+        if changed_zindex_query.get(entity).is_ok() {
+            dirty = true;
+        }
+    }
+    if dirty {
+        trace!("Updating root stacking context");
+        let stacking_context = &mut flex_surface.root_stacking_context;
+        stacking_context.updated = true;
+        stacking_context.context.clear();
+        for (&entity, _node) in flex_surface.window_nodes.map.iter() {
+            let z_index = style_query.get_component::<Style>(entity).unwrap().z_index;
+            stacking_context.context.push((entity, z_index.get()));
+            if z_index == ZIndex::Auto {
+                fill_stacking_context(entity, stacking_context, z_index.get(), style_query);
+            }
+            stacking_context
+                .context
+                .sort_by_key(|(_entity, z_index)| *z_index);
+        }
     }
 
-    // assume one window for time being...
-    let logical_to_physical_factor = if let Some(primary_window) = windows.get_primary() {
-        primary_window.scale_factor()
-    } else {
-        1.
-    };
+    for entity in changed_zindex_query.iter() {
+        trace!("Updating stacking context for entity {:?}", entity);
+        update_stacking_context(&mut *flex_surface, entity, style_query);
+        dirty = true;
+    }
 
-    if scale_factor_events.iter().next_back().is_some() {
-        update_changed(
-            &mut *flex_surface,
-            logical_to_physical_factor,
-            full_node_query,
+    // Update z transforms if any stacking context has been updated
+    if dirty {
+        trace!("Updating z transforms");
+        let mut current_z = 0.;
+        update_transforms_z_impl(
+            flex_surface,
+            &flex_surface.root_stacking_context,
+            &mut current_z,
+            transform_query,
         );
+        // Reset updated flag
+        flex_surface.root_stacking_context.updated = false;
+        for stacking_context in flex_surface.stacking_contexts.values_mut() {
+            stacking_context.updated = false;
+        }
+    }
+}
+
+fn update_stacking_context(
+    flex_surface: &mut FlexSurface,
+    entity: Entity,
+    style_query: &Query<(
+        &Style,
+        Option<&Parent>,
+        Option<&Children>,
+        Option<&NodeWindowId>,
+    )>,
+) {
+    let stacking_context_entry = flex_surface.stacking_contexts.entry(entity);
+
+    // Entites with ZIndex::Auto and their children are included in the parent's context
+    if !is_root_node(entity, style_query) {
+        let z_index = style_query.get_component::<Style>(entity).unwrap().z_index;
+        if z_index == ZIndex::Auto {
+            let parent = style_query.get_component::<Parent>(entity).unwrap();
+            if let Entry::Occupied(entry) = stacking_context_entry {
+                entry.remove();
+            }
+            trace!(
+                "{:?} has ZIndex::Auto, including it into its parent {:?}",
+                entity,
+                **parent
+            );
+            return update_stacking_context(flex_surface, **parent, style_query);
+        }
+    }
+
+    let children = style_query.get_component::<Children>(entity);
+    if children.is_err() || children.unwrap().is_empty() {
+        trace!("Found leaf: {:?}", entity);
+        if let Entry::Occupied(entry) = stacking_context_entry {
+            entry.remove();
+        }
+        return;
+    }
+
+    let stacking_context = stacking_context_entry.or_default();
+    if stacking_context.updated {
+        trace!("Found root: {:?}, skipping", entity);
     } else {
-        update_changed(&mut *flex_surface, logical_to_physical_factor, node_query);
+        trace!("Found root: {:?}", entity);
+        stacking_context.updated = true;
+        stacking_context.context.clear();
+        let starting_index = 0;
+        stacking_context.root_entity = Some(entity);
+        stacking_context.context.push((entity, starting_index));
+        fill_stacking_context(entity, stacking_context, starting_index, style_query);
+        stacking_context
+            .context
+            .sort_by_key(|(_entity, z_index)| *z_index);
     }
+}
 
-    fn update_changed<F>(
-        flex_surface: &mut FlexSurface,
-        scaling_factor: f64,
-        query: Query<(Entity, &Style, Option<&CalculatedSize>), F>,
-    ) where
-        F: QueryFilter,
-    {
-        // update changed nodes
-        for (entity, style, calculated_size) in query.iter() {
-            // TODO: remove node from old hierarchy if its root has changed
-            if let Some(calculated_size) = calculated_size {
-                flex_surface.upsert_leaf(entity, &style, *calculated_size, scaling_factor);
-            } else {
-                flex_surface.upsert_node(entity, &style, scaling_factor);
+fn fill_stacking_context(
+    entity: Entity,
+    stacking_context: &mut StackingContext,
+    current_index: i16,
+    style_query: &Query<(
+        &Style,
+        Option<&Parent>,
+        Option<&Children>,
+        Option<&NodeWindowId>,
+    )>,
+) {
+    if let Ok(children) = style_query.get_component::<Children>(entity) {
+        for &child in children.iter() {
+            if style_query.get_component::<NodeWindowId>(child).is_err() {
+                if let Ok(style) = &style_query.get_component::<Style>(child) {
+                    let z_index = style.z_index;
+                    let new_index = z_index.get() + current_index;
+                    stacking_context.context.push((child, new_index));
+                    if z_index == ZIndex::Auto {
+                        fill_stacking_context(child, stacking_context, new_index, style_query);
+                    }
+                }
             }
         }
     }
+}
+
+pub const UI_Z_STEP: f32 = 0.001;
 
-    for (entity, style, calculated_size) in changed_size_query.iter() {
-        flex_surface.upsert_leaf(entity, &style, *calculated_size, logical_to_physical_factor);
+fn update_transforms_z_impl(
+    flex_surface: &FlexSurface,
+    stacking_context: &StackingContext,
+    current_z: &mut f32,
+    transform_query: &mut Query<
+        (&mut Transform, &mut GlobalTransform, Option<&Parent>),
+        With<Style>,
+    >,
+) {
+    for (entity, _z_index) in stacking_context.context.iter() {
+        if let Some(child_stacking_context) = flex_surface
+            .stacking_contexts
+            .get(&entity)
+            .filter(|_| stacking_context.root_entity != Some(*entity))
+        {
+            // This is not the root entity of this context, and it has its own context
+            update_transforms_z_impl(
+                flex_surface,
+                child_stacking_context,
+                current_z,
+                transform_query,
+            );
+        } else if let Ok(mut global_transform) =
+            transform_query.get_component_mut::<GlobalTransform>(*entity)
+        {
+            *current_z += UI_Z_STEP;
+            global_transform.translation.z = *current_z;
+        }
     }
+    // This loop is not merged with the previous one since the "z-index order" can be different from the entity hierarchy order
+    for (entity, _z_index) in stacking_context.context.iter() {
+        if Some(*entity) != stacking_context.root_entity {
+            let parent_global_z = transform_query
+                .get_component::<Parent>(*entity)
+                .and_then(|parent| transform_query.get_component::<GlobalTransform>(**parent))
+                .map(|transform| transform.translation.z)
+                .unwrap_or_default();
+            if let Ok((mut transform, global_transform, _parent)) = transform_query.get_mut(*entity)
+            {
+                transform.translation.z = global_transform.translation.z - parent_global_z;
+            }
+        }
+    }
+}
 
-    // TODO: handle removed nodes
+pub fn garbage_collection(
+    flex_surface: &mut FlexSurface,
+    style_query: &Query<(
+        &Style,
+        Option<&Parent>,
+        Option<&Children>,
+        Option<&NodeWindowId>,
+    )>,
+) {
+    for entity in style_query.removed::<Style>() {
+        if let Some(node) = flex_surface.entity_to_stretch.remove(entity) {
+            trace!("Removing stretch node for: {:?}", entity);
+            // flex_surface.stretch.remove(node); // FIXME: this unexpectedly unwraps
+            if let Some(window_node) = flex_surface.window_nodes.map.remove(entity) {
+                trace!("Removing stretch window node for: {:?}", entity);
+                // flex_surface.stretch.remove(window_node); // FIXME: this unexpectedly unwraps
+            }
+        }
+        if flex_surface.stacking_contexts.remove(entity).is_some() {
+            trace!("Removing stacking context for: {:?}", entity);
+        }
+    }
+}
+
+#[cfg(test)]
+mod tests {
+    use bevy_ecs::{
+        Changed, Commands, Entity, IntoSystem, Or, Query, ResMut, Resources, Schedule, SystemStage,
+        With, World,
+    };
+    use bevy_transform::{
+        components::{Children, GlobalTransform, Parent, Transform},
+        hierarchy::BuildChildren,
+    };
+
+    use super::{update_transforms_z, FlexSurface, Node, NodeWindowId, Style, ZIndex, UI_Z_STEP};
 
-    // update window children (for now assuming all Nodes live in the primary window)
-    if let Some(primary_window) = windows.get_primary() {
-        flex_surface.set_window_children(primary_window.id(), root_node_query.iter());
+    fn node_with_transform(
+        name: &str,
+        z_index: ZIndex,
+    ) -> (String, Node, Style, Transform, GlobalTransform) {
+        (
+            name.to_owned(),
+            Node::default(),
+            Style {
+                z_index,
+                ..Default::default()
+            },
+            Transform::default(),
+            GlobalTransform::default(),
+        )
     }
 
-    // update children
-    for (entity, children) in children_query.iter() {
-        flex_surface.update_children(entity, &children);
+    fn node_without_transform(name: &str, z_index: ZIndex) -> (String, Node, Style) {
+        (
+            name.to_owned(),
+            Node::default(),
+            Style {
+                z_index,
+                ..Default::default()
+            },
+        )
+    }
+
+    fn get_steps(transform: &Transform) -> i32 {
+        (transform.translation.z / UI_Z_STEP).round() as i32
+    }
+
+    pub fn update_transforms_z_system(
+        mut flex_surface: ResMut<FlexSurface>,
+        changed_zindex_query: Query<
+            Entity,
+            (
+                With<Style>,
+                Or<(Changed<Style>, Changed<Parent>, Changed<Children>)>,
+            ),
+        >,
+        style_query: Query<(
+            &Style,
+            Option<&Parent>,
+            Option<&Children>,
+            Option<&NodeWindowId>,
+        )>,
+        mut transform_query: Query<
+            (&mut Transform, &mut GlobalTransform, Option<&Parent>),
+            With<Style>,
+        >,
+    ) {
+        update_transforms_z(
+            &mut *flex_surface,
+            &changed_zindex_query,
+            &style_query,
+            &mut transform_query,
+        );
     }
 
-    // compute layouts
-    flex_surface.compute_window_layouts();
+    #[test]
+    fn test_ui_z_system() {
+        let mut world = World::default();
+        let mut resources = Resources::default();
+        let mut commands = Commands::default();
+        commands.set_entity_reserver(world.get_entity_reserver());
+
+        commands.spawn(node_with_transform("0", ZIndex::Some(0)));
+        let entity_0 = commands.current_entity().unwrap();
 
-    let physical_to_logical_factor = 1. / logical_to_physical_factor;
+        commands
+            .spawn(node_with_transform("1", ZIndex::Some(1)))
+            .with_children(|parent| {
+                parent
+                    .spawn(node_with_transform("1-0", ZIndex::None))
+                    .with_children(|parent| {
+                        parent.spawn(node_without_transform("1-0-0", ZIndex::None));
+                        parent.spawn(node_with_transform("1-0-1", ZIndex::None));
+                        parent.spawn(node_with_transform("1-0-2", ZIndex::None));
+                    });
+                parent.spawn(node_with_transform("1-1", ZIndex::None));
+                parent
+                    .spawn(node_with_transform("1-2", ZIndex::None))
+                    .with_children(|parent| {
+                        parent.spawn(node_with_transform("1-2-0", ZIndex::None));
+                        parent.spawn(node_with_transform("1-2-1", ZIndex::Some(-1)));
+                        parent
+                            .spawn(node_with_transform("1-2-2", ZIndex::None))
+                            .with_children(|_| ());
+                        parent.spawn(node_with_transform("1-2-3", ZIndex::None));
+                    });
+                parent.spawn(node_with_transform("1-3", ZIndex::None));
+            });
+        let entity_1 = commands.current_entity().unwrap();
 
-    let to_logical = |v| (physical_to_logical_factor * v as f64) as f32;
+        commands
+            .spawn(node_with_transform("2", ZIndex::Some(2)))
+            .with_children(|parent| {
+                parent
+                    .spawn(node_with_transform("2-0", ZIndex::None))
+                    .with_children(|_parent| ());
+                parent
+                    .spawn(node_with_transform("2-1", ZIndex::Auto))
+                    .with_children(|parent| {
+                        parent.spawn(node_with_transform("2-1-0", ZIndex::Some(-1)));
+                    });
+            });
+        let entity_2 = commands.current_entity().unwrap();
+        commands.apply(&mut world, &mut resources);
 
-    for (entity, mut node, mut transform, parent, parent_flags, transform_flags) in
-        node_transform_query.iter_mut()
-    {
-        let layout = flex_surface.get_layout(entity).unwrap();
-        node.size = Vec2::new(
-            to_logical(layout.size.width),
-            to_logical(layout.size.height),
+        let mut flex_surface = FlexSurface::default();
+        flex_surface.window_nodes.map.insert(
+            entity_0,
+            flex_surface
+                .stretch
+                .new_node(Default::default(), Default::default())
+                .unwrap(),
         );
-        let position = &mut transform.translation;
-        position.x = to_logical(layout.location.x + layout.size.width / 2.0);
-        position.y = to_logical(layout.location.y + layout.size.height / 2.0);
-        if parent_flags.changed() || transform_flags.changed() {
-            if let Some(parent) = parent {
-                if let Ok(parent_layout) = flex_surface.get_layout(parent.0) {
-                    position.x -= to_logical(parent_layout.size.width / 2.0);
-                    position.y -= to_logical(parent_layout.size.height / 2.0);
-                }
-            }
-        }
+        flex_surface.window_nodes.map.insert(
+            entity_1,
+            flex_surface
+                .stretch
+                .new_node(Default::default(), Default::default())
+                .unwrap(),
+        );
+        flex_surface.window_nodes.map.insert(
+            entity_2,
+            flex_surface
+                .stretch
+                .new_node(Default::default(), Default::default())
+                .unwrap(),
+        );
+        flex_surface.window_nodes.dirty = true;
+        resources.insert(flex_surface);
+
+        let mut schedule = Schedule::default();
+        let mut update_stage = SystemStage::parallel();
+        update_stage.add_system(update_transforms_z_system.system());
+        schedule.add_stage("update", update_stage);
+        schedule.initialize_and_run(&mut world, &mut resources);
+
+        // GlobalTransform
+        let mut actual_result = world
+            .query::<(&String, &GlobalTransform)>()
+            .map(|(name, &transform)| (name.clone(), get_steps(&transform.into())))
+            .collect::<Vec<(String, i32)>>();
+        actual_result.sort_unstable_by_key(|(name, _)| name.clone());
+        let expected_result = vec![
+            ("0".to_owned(), 1), // ZIndex::Some(0)
+            ("1".to_owned(), 2), // ZIndex::Some(1)
+            ("1-0".to_owned(), 3),
+            // 1-0-0 has no transform
+            ("1-0-1".to_owned(), 4),
+            ("1-0-2".to_owned(), 5),
+            ("1-1".to_owned(), 6),
+            ("1-2".to_owned(), 8),
+            ("1-2-0".to_owned(), 9),
+            ("1-2-1".to_owned(), 7), // ZIndex::Some(-1), placed before 1-2
+            ("1-2-2".to_owned(), 10),
+            ("1-2-3".to_owned(), 11),
+            ("1-3".to_owned(), 12),
+            ("2".to_owned(), 14), // ZIndex::Some(2)
+            ("2-0".to_owned(), 15),
+            ("2-1".to_owned(), 16),   // ZIndex::Auto
+            ("2-1-0".to_owned(), 13), // ZIndex::Some(-1), placed before 2
+        ];
+        assert_eq!(actual_result, expected_result);
+
+        // Transform
+        let mut actual_result = world
+            .query::<(&String, &Transform)>()
+            .map(|(name, transform)| (name.clone(), get_steps(transform)))
+            .collect::<Vec<(String, i32)>>();
+        actual_result.sort_unstable_by_key(|(name, _)| name.clone());
+        let expected_result = vec![
+            ("0".to_owned(), 1), // ZIndex::Some(0)
+            ("1".to_owned(), 2), // ZIndex::Some(1)
+            ("1-0".to_owned(), 1),
+            // 1-0-0 has no transform
+            ("1-0-1".to_owned(), 1),
+            ("1-0-2".to_owned(), 2),
+            ("1-1".to_owned(), 4),
+            ("1-2".to_owned(), 6),
+            ("1-2-0".to_owned(), 1),
+            ("1-2-1".to_owned(), -1), // ZIndex::Some(-1), placed before 1-2
+            ("1-2-2".to_owned(), 2),
+            ("1-2-3".to_owned(), 3),
+            ("1-3".to_owned(), 10),
+            ("2".to_owned(), 14), // ZIndex::Some(2)
+            ("2-0".to_owned(), 1),
+            ("2-1".to_owned(), 2),    // ZIndex::Auto
+            ("2-1-0".to_owned(), -3), // ZIndex::Some(-1), placed before 2
+        ];
+        assert_eq!(actual_result, expected_result);
     }
 }
diff --git a/crates/bevy_ui/src/lib.rs b/crates/bevy_ui/src/lib.rs
index 5996bba7cd0f9..b06a5b4d7b414 100644
--- a/crates/bevy_ui/src/lib.rs
+++ b/crates/bevy_ui/src/lib.rs
@@ -5,9 +5,7 @@ mod focus;
 mod margins;
 mod node;
 mod render;
-pub mod update;
 pub mod widget;
-
 pub use anchors::*;
 pub use flex::*;
 pub use focus::*;
@@ -22,13 +20,13 @@ pub mod prelude {
 use bevy_app::prelude::*;
 use bevy_ecs::{IntoSystem, SystemStage};
 use bevy_render::render_graph::RenderGraph;
-use update::ui_z_system;
 
 #[derive(Default)]
 pub struct UiPlugin;
 
 pub mod stage {
     pub const UI: &str = "ui";
+    pub const UI_POST_UPDATE: &str = "ui_post_update";
 }
 
 impl Plugin for UiPlugin {
@@ -43,8 +41,16 @@ impl Plugin for UiPlugin {
             // add these stages to front because these must run before transform update systems
             .add_system_to_stage(stage::UI, widget::text_system.system())
             .add_system_to_stage(stage::UI, widget::image_node_system.system())
-            .add_system_to_stage(stage::UI, ui_z_system.system())
-            .add_system_to_stage(stage::UI, flex_node_system.system())
+            .add_system_to_stage(stage::UI, flex::layout_system.system())
+            .add_stage_after(
+                bevy_app::stage::POST_UPDATE,
+                stage::UI_POST_UPDATE,
+                SystemStage::parallel(),
+            )
+            .add_system_to_stage(
+                stage::UI_POST_UPDATE,
+                window_nodes_transform_system.system(),
+            )
             .add_system_to_stage(bevy_render::stage::DRAW, widget::draw_text_system.system());
 
         let resources = app.resources();
diff --git a/crates/bevy_ui/src/node.rs b/crates/bevy_ui/src/node.rs
index fc9c4824413ee..a806913d68ccd 100644
--- a/crates/bevy_ui/src/node.rs
+++ b/crates/bevy_ui/src/node.rs
@@ -48,6 +48,29 @@ impl AddAssign<f32> for Val {
     }
 }
 
+#[derive(Debug, Clone, Copy, PartialEq, Eq, Reflect)]
+#[reflect_value()]
+pub enum ZIndex {
+    None,
+    Auto,
+    Some(i16),
+}
+
+impl Default for ZIndex {
+    fn default() -> Self {
+        Self::None
+    }
+}
+
+impl ZIndex {
+    pub fn get(&self) -> i16 {
+        match self {
+            ZIndex::None => 0,
+            ZIndex::Auto => 0,
+            ZIndex::Some(i) => *i,
+        }
+    }
+}
 #[derive(Clone, PartialEq, Debug, Reflect)]
 pub struct Style {
     pub display: Display,
@@ -70,6 +93,7 @@ pub struct Style {
     pub min_size: Size<Val>,
     pub max_size: Size<Val>,
     pub aspect_ratio: Option<f32>,
+    pub z_index: ZIndex,
 }
 
 impl Default for Style {
@@ -95,6 +119,7 @@ impl Default for Style {
             min_size: Size::new(Val::Auto, Val::Auto),
             max_size: Size::new(Val::Auto, Val::Auto),
             aspect_ratio: Default::default(),
+            z_index: Default::default(),
         }
     }
 }
diff --git a/crates/bevy_ui/src/update.rs b/crates/bevy_ui/src/update.rs
deleted file mode 100644
index 928bcc60b555d..0000000000000
--- a/crates/bevy_ui/src/update.rs
+++ /dev/null
@@ -1,149 +0,0 @@
-use super::Node;
-use bevy_ecs::{Entity, Query, With, Without};
-use bevy_transform::prelude::{Children, Parent, Transform};
-
-pub const UI_Z_STEP: f32 = 0.001;
-
-pub fn ui_z_system(
-    root_node_query: Query<Entity, (With<Node>, Without<Parent>)>,
-    mut node_query: Query<&mut Transform, With<Node>>,
-    children_query: Query<&Children>,
-) {
-    let mut current_global_z = 0.0;
-    for entity in root_node_query.iter() {
-        current_global_z = update_hierarchy(
-            &children_query,
-            &mut node_query,
-            entity,
-            current_global_z,
-            current_global_z,
-        );
-    }
-}
-
-fn update_hierarchy(
-    children_query: &Query<&Children>,
-    node_query: &mut Query<&mut Transform, With<Node>>,
-    entity: Entity,
-    parent_global_z: f32,
-    mut current_global_z: f32,
-) -> f32 {
-    current_global_z += UI_Z_STEP;
-    if let Ok(mut transform) = node_query.get_mut(entity) {
-        transform.translation.z = current_global_z - parent_global_z;
-    }
-    if let Ok(children) = children_query.get(entity) {
-        let current_parent_global_z = current_global_z;
-        for child in children.iter().cloned() {
-            current_global_z = update_hierarchy(
-                children_query,
-                node_query,
-                child,
-                current_parent_global_z,
-                current_global_z,
-            );
-        }
-    }
-    current_global_z
-}
-#[cfg(test)]
-mod tests {
-    use bevy_ecs::{Commands, IntoSystem, Resources, Schedule, SystemStage, World};
-    use bevy_transform::{components::Transform, hierarchy::BuildChildren};
-
-    use crate::Node;
-
-    use super::{ui_z_system, UI_Z_STEP};
-
-    fn node_with_transform(name: &str) -> (String, Node, Transform) {
-        (name.to_owned(), Node::default(), Transform::default())
-    }
-
-    fn node_without_transform(name: &str) -> (String, Node) {
-        (name.to_owned(), Node::default())
-    }
-
-    fn get_steps(transform: &Transform) -> u32 {
-        (transform.translation.z / UI_Z_STEP).round() as u32
-    }
-
-    #[test]
-    fn test_ui_z_system() {
-        let mut world = World::default();
-        let mut resources = Resources::default();
-        let mut commands = Commands::default();
-        commands.set_entity_reserver(world.get_entity_reserver());
-
-        commands.spawn(node_with_transform("0"));
-
-        commands
-            .spawn(node_with_transform("1"))
-            .with_children(|parent| {
-                parent
-                    .spawn(node_with_transform("1-0"))
-                    .with_children(|parent| {
-                        parent.spawn(node_with_transform("1-0-0"));
-                        parent.spawn(node_without_transform("1-0-1"));
-                        parent.spawn(node_with_transform("1-0-2"));
-                    });
-                parent.spawn(node_with_transform("1-1"));
-                parent
-                    .spawn(node_without_transform("1-2"))
-                    .with_children(|parent| {
-                        parent.spawn(node_with_transform("1-2-0"));
-                        parent.spawn(node_with_transform("1-2-1"));
-                        parent
-                            .spawn(node_with_transform("1-2-2"))
-                            .with_children(|_| ());
-                        parent.spawn(node_with_transform("1-2-3"));
-                    });
-                parent.spawn(node_with_transform("1-3"));
-            });
-
-        commands
-            .spawn(node_without_transform("2"))
-            .with_children(|parent| {
-                parent
-                    .spawn(node_with_transform("2-0"))
-                    .with_children(|_parent| ());
-                parent
-                    .spawn(node_with_transform("2-1"))
-                    .with_children(|parent| {
-                        parent.spawn(node_with_transform("2-1-0"));
-                    });
-            });
-        commands.apply(&mut world, &mut resources);
-
-        let mut schedule = Schedule::default();
-        let mut update_stage = SystemStage::parallel();
-        update_stage.add_system(ui_z_system.system());
-        schedule.add_stage("update", update_stage);
-        schedule.initialize_and_run(&mut world, &mut resources);
-
-        let mut actual_result = world
-            .query::<(&String, &Transform)>()
-            .map(|(name, transform)| (name.clone(), get_steps(transform)))
-            .collect::<Vec<(String, u32)>>();
-        actual_result.sort_unstable_by_key(|(name, _)| name.clone());
-        let expected_result = vec![
-            ("0".to_owned(), 1),
-            ("1".to_owned(), 1),
-            ("1-0".to_owned(), 1),
-            ("1-0-0".to_owned(), 1),
-            // 1-0-1 has no transform
-            ("1-0-2".to_owned(), 3),
-            ("1-1".to_owned(), 5),
-            // 1-2 has no transform
-            ("1-2-0".to_owned(), 1),
-            ("1-2-1".to_owned(), 2),
-            ("1-2-2".to_owned(), 3),
-            ("1-2-3".to_owned(), 4),
-            ("1-3".to_owned(), 11),
-            // 2 has no transform
-            ("2-0".to_owned(), 1),
-            ("2-1".to_owned(), 2),
-            ("2-1-0".to_owned(), 1),
-        ];
-        assert_eq!(actual_result, expected_result);
-    }
-}