Fixed form goes over menu

Asked

Viewed 379 times

1

I have an application where I have a regular 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 down, this form goes at the top of the page, and the rest of the page goes running behind it.

My problem is in leaving this form the way I need it. I place the property position: fixed, it is fixed, but either over the menu, or totally desposionado on the screen, and also the fact that I will use this same application on mobile, I’m kind of lost in how to do.

php javascript html css

  • Will the menu be set at the top too? The form should only go under the menu?

  • @theOriginal. My initial idea is that the menu is not fixed and when I upload the page, this form stay fixed at the top, but if so, I leave the fixed menu tbm without problems.

  • 1

    to put it on top, use in CSS: z-index: 1000;

  • If the answer below is not the solution, please check: How to create a Minimum, Complete and Verifiable example, this guide helps you get the most accurate answer possible to solve the problem.

2 answers

3

The parent element of form must be:

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

2

If the menu is at the top, use a margin from the top to make sure it doesn’t get on the menu, margin-top: 150px and use the property z-index: 999 to ensure that it stays on the elements in a fixed form.

CSS:

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

Browser other questions tagged php javascript html css

You are not signed in. Login or sign up in order to post.