Answer by Simon_Weaver for How does the "position: sticky;" property work?

Few more things I've come across:

When your sticky element is a component (angular etc)

If the 'sticky' element itself is a component with a custom element-selector, such as an angular component named <app-menu-bar> you will need to add the following to the component's css:
```
  :host { display: block; }     // or use flexbox
```

    app-menu-bar  { display: block; }   // (in the containing component's css)

Safari on iOS in particular seems to require display:block even on the root element app-root of an angular application or it won't stick.

If you are creating a component and defining the css inside the component (shadow DOM / encapsulated styles), make sure the position: sticky is being applied to the 'outer' selector (eg. app-menu-bar in devtools should show the sticky position) and not a top level divwithin the component. With Angular, this can be achieved with the :host selector in the css for your component.
```
  :host  {      position: sticky;      display: block;   // this is the same as shown above      top: 0;      background: red;      }
```

Other

If the element following your sticky element has a solid background, you must add the following to stop it from sliding underneath:
```
  .sticky-element { z-index: 100; }  .parent-of-sticky-element { position: relative; }
```
Your sticky element must be before your content if using top and after it if using bottom.
There are complications when using overflow: hidden on your wrapper element – in general it will kill the sticky element inside. Better explained in this question
Mobile browsers may disable sticky/fixed positioned items when the onscreen keyboard is visible. I'm not sure of the exact rules (does anybody ever know) but when the keyboard is visible you're looking at a sort of 'window' into the window and you won't easily be able to get things to stick to the actual visible top of the screen.
Make sure you have:
position: sticky;
and not
display: sticky;

Misc usability concerns

Be cautious if your design calls for for sticking things to the bottom of the screen on mobile devices. On iPhone X for instance they display a narrow line to indicate the swipe region (to get back to the homepage) - and elements inside this region aren't clickable. So if you stick something there be sure to test on iPhone X that users can activate it. A big 'Buy Now' button is no good if people can't click it!
If you're advertising on Facebook the webpage is displayed in a 'webview' control within Facebook's mobile apps. Especially when displaying video (where your content begins in the bottom half of the screen only) - they often completely mess up sticky elements by putting your page within a scrollable viewport that actually allows your sticky elements to disappear off the top of the page. Be sure to test in the context of an actual ad and not just in the phone's browser or even Facebook's browser which can all behave differently.