Fixed form goes over the menu

1

I have an application where I have a normal menu at the top of the page, and just below it a form, where this form has to be fixed, in a way that when I scroll the page down, that form is at the top of the page , and the rest of the page runs behind him.

My problem is to leave this form the way I need it. I put the property position: fixed , it stays fixed, but either on top of the menu, or totally imprisoned on the screen, and also because I'm going to use this same application on my phone, I'm kind of lost in how to do it.

    
asked by anonymous 24.11.2015 / 12:42

2 answers

3

The parent element of form must be:

position: fixed;
top: 0;
width: 100%;
z-index: 99999; /* Pra Garantir */ 
    
24.11.2015 / 12:55
2

If the menu is at the top, use a top margin to make sure it is not over the menu, margin-top: 150px , and use the z-index: 999 property to ensure that it stays over the form elements fixed.

CSS:

form{
     position: fixed;
     margin-top: 100px; // distancia do top
     right: 0;
     z-index: 9999;
}
    
25.11.2015 / 17:26