Blazorise Z-Index Utility

Control which elements appear in front of others, from sticky headers and floating toolbars to custom overlays.

Layers

Choose a layer that matches your use case, and Blazorise selects the appropriate stacking value. Available layers are ZIndex.Dropdown, ZIndex.Sticky, ZIndex.Fixed, ZIndex.SidebarBackdrop, ZIndex.Sidebar, ZIndex.OffcanvasBackdrop, ZIndex.Offcanvas, ZIndex.ModalBackdrop, ZIndex.Modal, ZIndex.Popover, ZIndex.Tooltip, ZIndex.Toast, ZIndex.Snackbar, or ZIndex.OnScreenKeyboard.

For a floating toolbar, use <Div Position="Position.Fixed" ZIndex="ZIndex.Fixed" />. Use Position to control placement and ZIndex to control stacking order.

Use ZIndex.Sidebar for application navigation and ZIndex.SidebarBackdrop for an overlay behind it. Use ZIndex.Offcanvas and ZIndex.OffcanvasBackdrop for temporary slide-in panels. Named layers use provider-specific values, and some layers can share the same value.

Named

Use named layers to match an element's role. Here, ZIndex.Modal places the modal layer in front of ZIndex.Fixed.

ZIndex.Fixed
ZIndex.Modal 
<Div Position="Position.Relative" ZIndex="ZIndex.Is0" Height="Height.Px( 224 )">
    <Div Position="Position.Absolute.Top.Is0.Start.Is0" ZIndex="ZIndex.Fixed" Width="Width.Px( 176 )" Height="Height.Px( 144 )" Background="Background.Primary.Subtle" TextColor="TextColor.Primary.Emphasis" Border="Border.Is1.Primary.OnAll.Rounded" Padding="Padding.Is3">
        ZIndex.Fixed
    </Div>
    <Div Position="Position.Absolute.Top.Is0.Start.Is0" ZIndex="ZIndex.Modal" Width="Width.Px( 176 )" Height="Height.Px( 144 )" Margin="Margin.Is5.FromTop.Is5.FromStart" Background="Background.Warning.Subtle" TextColor="TextColor.Warning.Emphasis" Border="Border.Is1.Warning.OnAll.Rounded" Padding="Padding.Is3" Flex="Flex.JustifyContent.End.AlignItems.End">
        ZIndex.Modal
    </Div>
</Div>

Levels

Use ZIndex.Is0, ZIndex.Is1, ZIndex.Is2, and ZIndex.Is3 to arrange overlapping elements. Blazorise selects the appropriate value for each level. Add Negative to a numbered level, such as ZIndex.Is2.Negative, to place it below zero.

Higher levels appear in front of lower levels. In this example, each block appears in front of the next one.

ZIndex.Is3
ZIndex.Is2
ZIndex.Is1
ZIndex.Is0
ZIndex.Is1.Negative
ZIndex.Is2.Negative
ZIndex.Is3.Negative 
<Div Position="Position.Relative" ZIndex="ZIndex.Is0" Height="Height.Px( 320 )">
    <Div Position="Position.Absolute.Top.Is0.Start.Is0" ZIndex="ZIndex.Is3" Width="Width.Px( 128 )" Height="Height.Px( 128 )" Background="Background.Primary.Subtle" TextColor="TextColor.Primary.Emphasis" Border="Border.Is1.Primary.OnAll.Rounded" Padding="Padding.Is1" Flex="Flex.JustifyContent.End.AlignItems.End">
        ZIndex.Is3
    </Div>
    <Div Position="Position.Absolute" ZIndex="ZIndex.Is2" Width="Width.Px( 128 )" Height="Height.Px( 128 )" Background="Background.Primary.Subtle" TextColor="TextColor.Primary.Emphasis" Border="Border.Is1.Primary.OnAll.Rounded" Padding="Padding.Is1" Flex="Flex.JustifyContent.End.AlignItems.End" Style="inset-block-start: 32px; inset-inline-start: 32px;">
        ZIndex.Is2
    </Div>
    <Div Position="Position.Absolute" ZIndex="ZIndex.Is1" Width="Width.Px( 128 )" Height="Height.Px( 128 )" Background="Background.Primary.Subtle" TextColor="TextColor.Primary.Emphasis" Border="Border.Is1.Primary.OnAll.Rounded" Padding="Padding.Is1" Flex="Flex.JustifyContent.End.AlignItems.End" Style="inset-block-start: 64px; inset-inline-start: 64px;">
        ZIndex.Is1
    </Div>
    <Div Position="Position.Absolute" ZIndex="ZIndex.Is0" Width="Width.Px( 128 )" Height="Height.Px( 128 )" Background="Background.Primary.Subtle" TextColor="TextColor.Primary.Emphasis" Border="Border.Is1.Primary.OnAll.Rounded" Padding="Padding.Is1" Flex="Flex.JustifyContent.End.AlignItems.End" Style="inset-block-start: 96px; inset-inline-start: 96px;">
        ZIndex.Is0
    </Div>
    <Div Position="Position.Absolute" ZIndex="ZIndex.Is1.Negative" Width="Width.Px( 128 )" Height="Height.Px( 128 )" Background="Background.Primary.Subtle" TextColor="TextColor.Primary.Emphasis" Border="Border.Is1.Primary.OnAll.Rounded" Padding="Padding.Is1" Flex="Flex.JustifyContent.End.AlignItems.End" Style="inset-block-start: 128px; inset-inline-start: 128px;">
        ZIndex.Is1.Negative
    </Div>
    <Div Position="Position.Absolute" ZIndex="ZIndex.Is2.Negative" Width="Width.Px( 128 )" Height="Height.Px( 128 )" Background="Background.Primary.Subtle" TextColor="TextColor.Primary.Emphasis" Border="Border.Is1.Primary.OnAll.Rounded" Padding="Padding.Is1" Flex="Flex.JustifyContent.End.AlignItems.End" Style="inset-block-start: 160px; inset-inline-start: 160px;">
        ZIndex.Is2.Negative
    </Div>
    <Div Position="Position.Absolute" ZIndex="ZIndex.Is3.Negative" Width="Width.Px( 128 )" Height="Height.Px( 128 )" Background="Background.Primary.Subtle" TextColor="TextColor.Primary.Emphasis" Border="Border.Is1.Primary.OnAll.Rounded" Padding="Padding.Is1" Flex="Flex.JustifyContent.End.AlignItems.End" Style="inset-block-start: 192px; inset-inline-start: 192px;">
        ZIndex.Is3.Negative
    </Div>
</Div>

Numeric

Use a number when you need an exact value, for example <Div ZIndex="2000" />. Both int and int? values are supported, including zero and negative numbers.

These blocks use values from 3 down to -1. Higher values appear in front of lower values.

z-index: 3
z-index: 2
z-index: 1
z-index: 0
z-index: -1 
<Div Position="Position.Relative" ZIndex="ZIndex.Is0" Height="Height.Px( 256 )">
    <Div Position="Position.Absolute.Top.Is0.Start.Is0" ZIndex="3" Width="Width.Px( 128 )" Height="Height.Px( 128 )" Background="Background.Primary.Subtle" TextColor="TextColor.Primary.Emphasis" Border="Border.Is1.Primary.OnAll.Rounded" Padding="Padding.Is1" Flex="Flex.JustifyContent.End.AlignItems.End">
        z-index: 3
    </Div>
    <Div Position="Position.Absolute" ZIndex="2" Width="Width.Px( 128 )" Height="Height.Px( 128 )" Background="Background.Primary.Subtle" TextColor="TextColor.Primary.Emphasis" Border="Border.Is1.Primary.OnAll.Rounded" Padding="Padding.Is1" Flex="Flex.JustifyContent.End.AlignItems.End" Style="inset-block-start: 32px; inset-inline-start: 32px;">
        z-index: 2
    </Div>
    <Div Position="Position.Absolute" ZIndex="1" Width="Width.Px( 128 )" Height="Height.Px( 128 )" Background="Background.Primary.Subtle" TextColor="TextColor.Primary.Emphasis" Border="Border.Is1.Primary.OnAll.Rounded" Padding="Padding.Is1" Flex="Flex.JustifyContent.End.AlignItems.End" Style="inset-block-start: 64px; inset-inline-start: 64px;">
        z-index: 1
    </Div>
    <Div Position="Position.Absolute" ZIndex="0" Width="Width.Px( 128 )" Height="Height.Px( 128 )" Background="Background.Primary.Subtle" TextColor="TextColor.Primary.Emphasis" Border="Border.Is1.Primary.OnAll.Rounded" Padding="Padding.Is1" Flex="Flex.JustifyContent.End.AlignItems.End" Style="inset-block-start: 96px; inset-inline-start: 96px;">
        z-index: 0
    </Div>
    <Div Position="Position.Absolute" ZIndex="-1" Width="Width.Px( 128 )" Height="Height.Px( 128 )" Background="Background.Primary.Subtle" TextColor="TextColor.Primary.Emphasis" Border="Border.Is1.Primary.OnAll.Rounded" Padding="Padding.Is1" Flex="Flex.JustifyContent.End.AlignItems.End" Style="inset-block-start: 128px; inset-inline-start: 128px;">
        z-index: -1
    </Div>
</Div>

Usage

Use UtilityTarget to choose whether ZIndex applies to a component or its wrapper, where supported. It follows the same target as the component's other utilities.

A parent's stacking order can limit which elements its children can overlap. If increasing a child's level does not bring it forward, check the parent's stacking order too.

Defaults

Set ZIndex.Default or pass null to restore the component's default stacking behavior. Use ZIndex.Is0 when you want to explicitly choose the zero level.

On this page