Z-index issue for lightning-button-menu in lightning-modal

Question

This is my issue, when using <lightning-modal>. I've read several posts here about z-index issues, but I haven't found any that address the <lightning-modal> situation, which I suspect has built in z-index parameters to pop it to the front.

I tried applying a z-index (and position: relative) css class to the menu, but it did nothing. This next image is a similar modal I created prior to <lightning-modal> just using a regular lwc. This is how the menu should appear relative to the footer.

Css is not my strong suit, so any recommendations are appreciated.

Answer 1

Turns out that z-index does work, but I just wasn't thinking big enough. I found this info about slds z-index that specifies that lightning-modal is z-index 9000. I set my z-index for the lightning-button-menu to 9100 and it works!

.merge-menu{
    position: absolute;
    z-index: 9100;
}

It does not work with position:relative, so with position:absolute I had to apply some css to the surrounding elements, but those were easy tweaks.

Here's the result: