How to stop angular-material components overlapping my sticky navbar?

Question

I have created a navbar using normal CSS3. But some of the components like input fields and buttons are created using angular material. Here my navbar is sticky. But components created using angular material are overlapping my navbar.

navbar css is:

position: sticky;
top: 0;

Answer 1

Set the z-index of your navbar to a greater value in your css.

Example: z-index: 10