[docs] z-index added in popper when used by split button

[PunitSoniME]

resolves #33762

• I have followed (at least) the PR section of the contributing guide.

[mui-bot]

No bundle size changes

Generated by 🚫 dangerJS against c94db28

[PunitSoniME]

@siriwatknp

Can you review this PR please ?

[siriwatknp]

👍 Thanks for fixing it!

[siriwatknp]

This is good enough to fix the docs. In v6, we can consider adding z-index to Material UI popper. #33762 (comment)

[oliviertassinari]

In this case of the demo, it seems that the stacking order is wrong because there is another element in the DOM order after that also has a position: relative. So I assume that we have 3 options, either we remove the position: relative or we remove disablePortal, or we add the zIndex.

I'm not sure why the position: relative; was added in https://github.com/mui/material-ui/blame/c1ea008e7d747b633c048c1ed967a0f930129f54/src/internal/ButtonBase.js#L15.

[PunitSoniME]

Hi @oliviertassinari

Popper has z-index issue, similar kind of issue reported #33730 as well.

[oliviertassinari]

@PunitSoniME Yeah, I guess there are multiple possible opportunities behind this:

1. Remove a position relative in the button? If we do, then maybe revert this PR
2. Maybe add a z-index: 1 on the Popper. Hopping we won't have to revert it like [Skeleton] Fix z-index elevation issue #20803. If we do, then maybe revert this PR