Checkboxes show above sticky content

[angrybacon]

Steps to reproduce

https://stackblitz.com/edit/react-2qkkqu

1. Reduce viewport width to enable vertical scrolling
2. Scroll towards the bottom and notice the checkboxes remain visible above the sticky content

Current behavior

Screen.Recording.2024-09-08.at.12.41.50.mov

Expected behavior

I expect the sticky content to appear above any scrolling content by default, without having to resort to hard-to-maintain z-index fixes.

Context

I'm trying to make the top of my Paper available at all times for the user, including after scrolling to see the bottom of the Paper.

Checkbox inputs use position: relative which makes them appear on top. I'm not familiar enough with position: sticky to assume that this is the expected or unexpected behavior (or that position: relative is required for MUI's checkboxes implementation)

Your environment

No response

Search keywords: checkbox sticky relative

[siriwatknp]

In this case, you definitely need to apply zIndex: 1 (at least). The position relative is require for the input (absolute).

[github-actions]

This issue has been closed. If you have a similar problem but not exactly the same, please open a new issue.
Now, if you have additional information related to this issue or things that could help future readers, feel free to leave a comment.

Note

We value your feedback @angrybacon! How was your experience with our support team?
If you could spare a moment, we'd love to hear your thoughts in this brief Support Satisfaction survey. Your insights help us improve!