fix: Open menu appears beneath sticky data grid header in FluentMenu

[JamesNK]

🐛 Bug Report

An open menu appears beneath a sticky FluentDataGrid header:

Also, you can mouseover/click on stick headers while it is open.

💻 Repro or Code Sample

FluentDataGrid with sticky header:

<FluentDataGrid ResizeLabel="@AspireFluentDataGridHeaderCell.GetResizeLabel(ControlStringsLoc)"
                ResizeType="DataGridResizeType.Discrete"
                Items="@FilteredHealthReports"
                ItemKey="r => r.Name"
                ResizableColumns="true"
                Style="width:100%"
                GenerateHeader="GenerateHeaderOption.Sticky"
                GridTemplateColumns="1fr 1fr 1.5fr"
                ShowHover="true">

FluentMenu is using the provider.

🤔 Expected Behavior

Menu popup appears above content.

😯 Current Behavior

Menu popup is below content, making it hard to use menu.

💁 Possible Solution

🔦 Context

🌍 Your Environment

• OS & Device: [e.g. MacOS, iOS, Windows, Linux] on [iPhone 7, PC]
• Browser [e.g. Microsoft Edge, Google Chrome, Apple Safari, Mozilla FireFox]
• .NET and Fluent UI Blazor library Version [e.g. 8.0.2 and 4.4.1]

[JamesNK]

I think it is related to adding display:fixed to work around the problem here: #2736 (comment)

Adding the z-index to the div with the display:fixed made it work again.

FluentUI might need to improve the change here: #2744