Material-ui: [AppBar] position="sticky" not working

[mbrevda]

• [x] This is not a v0.x issue.
• [x] I have searched the issues of this repository and believe that this is not a duplicate.

Expected Behavior 🤔

With <AppBar position="sticky"> I would expect the appbar to stay stuck at the top of the screen, even when scrolling

Current Behavior 😯

Instead, it's scrolling with the page

Steps to Reproduce 🕹

Demo: https://codesandbox.io/s/material-demo-y5crj

Context 🔦

Your Environment 🌎

| Tech | Version |
|--------------|---------|
| Material-UI | v4.1.0 |
| React | 16.8.6 |
| Browser | Chrome |
| TypeScript | |
| etc. | |

[support[bot]]

👋 Thanks for using Material-UI!

We use the issue tracker exclusively for bug reports and feature requests, however,
this issue appears to be a support request or question. Please ask on StackOverflow where the
community will do their best to help. There is a "material-ui" tag that you can use to tag your
question.

If you would like to link from here to your question on SO, it will help others find it.
If your issues is confirmed as a bug, you are welcome to reopen the issue using the issue template.

[mbrevda]

Is something not working as documented NOT a bug or is the problem in my code?

[joshwooding]

Notice how sticky-positioned elements are only sticky within their parent element.
https://alligator.io/css/position-sticky/

It's how position:sticky works, hence it's a support issue. 'sticky' behaviour is defined in the MDN Docs. If you set a height on the immediate parent it works. https://codesandbox.io/s/p11ig

[mbrevda]

Thanks!

[Sphinxs]

An alternative (if you have a component architecture) is React Sticky

[LakshitPaliwal]

[Zapodask]

try to apply CssBaseline before opening the AppBar
<CssBaseline /> <AppBar> <Toolbar> ... </Toolbar> </AppBar>