Menu appears behind modal-footer

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.

Desired appearance, vis-a-vis menu and footer

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


1 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!

    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: lightning-modal with z-index css on lightning-button-menu

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .