Fixed-position header and menu on a web page -- is that okay?

1. Are fixed headers good?
2. What position should I use for a header that is fixed at the top of the screen when I scroll down?
3. Why does position fixed not work?

Are fixed headers good?

A fixed header can give a website a polished look and has the added benefit of saving users time (since they don't have to scroll up to get back to the main navigation menu). In fact, one study found websites with sticky headers are 22% faster to navigate than other websites.

What position should I use for a header that is fixed at the top of the screen when I scroll down?

Answer: Use CSS fixed positioning

Simply apply the CSS position property with the value fixed in combination with the top and bottom property to place the element on the top or bottom of the viewport accordingly.

Why does position fixed not work?

Position fixed doesn't work with transform CSS property. It happens because transform creates a new coordinate system and your position: fixed element becomes fixed to that transformed element. To fix the problem you can remove transform CSS property from the parent element.