Blazorise Position Utilities

Place elements quickly with Position and edge utilities without writing custom CSS.

Position utilities help you layer badges, overlay controls, and align elements inside containers while keeping layout logic with your components.

How it works

Set the Position parameter to values like Position.Relative, Position.Absolute, Position.Fixed, or Position.Sticky. Use edge helpers like Top.Is0, Start.Is0, and Bottom.Is100 to place elements inside a relative parent, and combine them with Translate.Middle, Translate.MiddleX, or Translate.MiddleY to center content precisely.

Position utilities are not responsive, so pair them with other utilities when you need breakpoint-specific layout adjustments.

Examples

Position values

Use the position helpers to switch between static, relative, absolute, fixed, and sticky placement without custom CSS. This makes it easy to set up a positioned container that can host overlays or badges.

...

<Div Position="Position.Static">...</Div>
<Div Position="Position.Relative">...</Div>
<Div Position="Position.Absolute">...</Div>
<Div Position="Position.Fixed">...</Div>
<Div Position="Position.Sticky">...</Div>

Arrange elements

Arrange elements easily with the edge positioning utilities. The format is {Property}.Is{Position}.

Where property is one of:

Top - for the vertical top position
Start - for the horizontal left position
Bottom - for the vertical bottom position
End - for the horizontal right position

Where position is one of:

0 - for the 0 position
50 - for the 50% position
100 - for the 100% position

This is useful for placing icons, badges, or controls at the edges of a card or button without extra wrappers.

<Div Position="Position.Relative">
        <Div Position="Position.Absolute.Top.Is0.Start.Is0"></Div>
        <Div Position="Position.Absolute.Top.Is0.End.Is0"></Div>
        <Div Position="Position.Absolute.Top.Is50.Start.Is50"></Div>
        <Div Position="Position.Absolute.Bottom.Is50.End.Is50"></Div>
        <Div Position="Position.Absolute.Bottom.Is0.Start.Is0"></Div>
        <Div Position="Position.Absolute.Bottom.Is0.End.Is0"></Div>
</Div>

Center elements

In addition, you can also center the elements with the transform utility class Translate.Middle.

This is helpful for overlay content like loaders or centered actions that should stay aligned regardless of container size.

<Div Position="Position.Relative">
        <Div Position="Position.Absolute.Top.Is0.Start.Is0.Translate.Middle"></Div>
        <Div Position="Position.Absolute.Top.Is0.Start.Is50.Translate.Middle"></Div>
        <Div Position="Position.Absolute.Top.Is0.Start.Is100.Translate.Middle"></Div>
        <Div Position="Position.Absolute.Top.Is50.Start.Is0.Translate.Middle"></Div>
        <Div Position="Position.Absolute.Top.Is50.Start.Is50.Translate.Middle"></Div>
        <Div Position="Position.Absolute.Top.Is50.Start.Is100.Translate.Middle"></Div>
        <Div Position="Position.Absolute.Top.Is100.Start.Is0.Translate.Middle"></Div>
        <Div Position="Position.Absolute.Top.Is100.Start.Is50.Translate.Middle"></Div>
        <Div Position="Position.Absolute.Top.Is100.Start.Is100.Translate.Middle"></Div>
</Div>

By adding .Translate.MiddleX or .Translate.MiddleY classes, elements can be positioned only in horizontal or vertical direction.

<Div Position="Position.Relative">
        <Div Position="Position.Absolute.Top.Is0.Start.Is0"></Div>
        <Div Position="Position.Absolute.Top.Is0.Start.Is50.Translate.MiddleX"></Div>
        <Div Position="Position.Absolute.Top.Is0.End.Is0"></Div>
        <Div Position="Position.Absolute.Top.Is50.Start.Is0.Translate.MiddleY"></Div>
        <Div Position="Position.Absolute.Top.Is50.Start.Is50.Translate.Middle"></Div>
        <Div Position="Position.Absolute.Top.Is50.End.Is0.Translate.MiddleY"></Div>
        <Div Position="Position.Absolute.Bottom.Is0.Start.Is0"></Div>
        <Div Position="Position.Absolute.Bottom.Is0.Start.Is50.Translate.MiddleX"></Div>
        <Div Position="Position.Absolute.Bottom.Is0.End.Is0"></Div>
</Div>

Real-world example

Position utilities are ideal for badges and counters that sit on top of buttons without affecting layout, including top and bottom placements.

<Button Color="Color.Primary" Position="Position.Relative" Margin="Margin.Is2.FromEnd">
    Mails
    <Badge Color="Color.Secondary" Pill Position="Position.Absolute.Top.Is0.Start.Is100.Translate.Middle">
        +99
    </Badge>
</Button>
<Button Color="Color.Primary" Position="Position.Relative" Margin="Margin.Is2.FromEnd">
    Alerts
    <Badge Color="Color.Danger" Pill Position="Position.Absolute.Top.Is0.Start.Is100.Translate.Middle" Border="Border.Light.OnAll.RoundedCircle" Padding="Padding.Is2">
        <Span Visibility="Visibility.Invisible" Position="Position.Absolute">unread messages</Span>
    </Badge>
</Button>
<Button Color="Color.Primary" Position="Position.Relative">
    Updates
    <Badge Color="Color.Info" Pill Position="Position.Absolute.Bottom.Is0.End.Is0.Translate.Middle" Padding="Padding.Is2">
        3
    </Badge>
</Button>