FluentPopover and z-index

[true-perfect-code]

As far as I have understood correctly, z-index is set to 9999 for the FluentPopover component. Since I have to display a different div via FluentPopover (it is about help dialogue) I have reduced z-index at FluentPopover via Style but without result.

So it seems that this does not work. my question: Is this by design or are there certain reasons why this does not work?

I finally solved the problem by assigning z-index=10000 to my div, which I don't really like. I would have preferred to set z-index at FluentPopover down to e.g. 100 and then set 999 for my div.

Thanks
pc

[dvoituron]

We had to make some choices to define the zindex used by the components. But all these values come from the ZIndex.cs class (static variables). You can therefore customize them in your project.

[true-perfect-code]

@dvoituron

Many thanks for the super quick reply.

I have installed FluentUI Blazor via Nuget and then use Fluent components in the project. I assume that I won't find the ZIndex.cs file in my project in that form (I'm sure you mean FluentUI Blazor GitHub project).

Otherwise, if I have misunderstood, I would be very grateful if you could give me some tips on where to exactly look in my project (FluentUI Blazor Nuget is installed in RCL because I use it shared in my other two projects: MAUI Blazor and Blazor Web server).

Thanks
pc

[dvoituron]

I've referred to the file to explain the available values: https://github.com/microsoft/fluentui-blazor/blob/dev/src/Core/DesignTokens/Z-Index.cs

We use these static properties to define the attributes of the z index.
You can then configure them in your project using code like this: ZIndex.Overlay = 100

[true-perfect-code]

@dvoituron

Thank you very much, it works as you have described.

But I have one more suggestion. While reviewing the Z-Index.cs design token definitions, I noticed that the current values are clustered very close to the upper end of the z-index scale (e.g., DatePickerPopup = 9995, AnchoredRegion = 9995, Menu = 9990, etc.). While this may be functionally sufficient, it raises a few concerns from a scalability and architectural standpoint:

• Tight spacing: There are only 4–5 index values between critical layered components, which limits the flexibility to insert intermediate layers without resorting to arbitrary large values.
• High values without need: The use of 9999 gives the impression of a "hardcoded topmost layer", leaving little room for user extensions that want to sit above or between components.
• Hard to manage in complex apps: When building custom overlays, modals, or tooltips, developers might be forced to choose values like 10000+ to ensure visibility, which leads to messy and inconsistent layering logic.

It could be interesting to rethink the ZIndex system with a cleaner and more scalable structure, independent of legacy patterns from older frameworks. For example, instead of using values close to 10000, one could imagine a dedicated range between 0 and 1000, with clearly separated value zones for different component categories and enough space for extensibility.

This might improve maintainability, clarity, and developer experience when extending FluentUI with custom components.

Not a pressing issue of course, just something to consider for future evolution of the system 😊

Thanks again for your great work and this awesome component library!

Best regards
pc

[dvoituron]

Thanks for your feedback and this good reflection.

The version v5 will have less of these zindex because a majority of these features are included in the new web components and often use the dialog HTML element.
That will solve many of these issues.