Why doesn't z-index work in Safari?

Question

css

There is a site https://spbdialog.ru/
The problem with the menu in the safari browser in the iPhone and iPad - the z-index set for it does not work.
If you turn on the iphone emulation mode under Windows in the browser console - everything is ok, in Android devices - everything is ok.
Adding a transform property: translate3d(0 ,0, 10px); also gave no result.

Answer 1

maybe you are using old safari (position: sticky is not very well supported by browsers yet). In general, for complete cross-browser compatibility in your case, it is better to change the header to position: fixed, and in the body add an indent equal to the height of this header
https://caniuse.com/#search=sticky