Fixed div passing behind the others

Asked

Viewed 697 times

0

Hello, the first div of my site has the fixed position (position:fixed) and when I roll down, it gets behind the other elements like images and etc. It doesn’t work even if I put position:absolute or position:sticky , someone can help me? inserir a descrição da imagem aqui

html css

  • Add a z-index to it.

  • It worked. Thank you very much!

2 answers

1

The natural order of stacking of the elements is that those previously inserted in the DOM tree are below those inserted later. Is the stacking order.

With that, the first div fixed that you placed will be below the later ones when scrolling. To change this there is the property z-index which alters the order of stacking elements, and may cause one element inserted before to be on top of another inserted later.

Since the DOM tree can have multiple levels of nodes, each level receives one z-index according to your position, 1, 2, 3 and so on, you can declare a z-index to his div so that it will be on top of the others, assigning a sufficiently high value, and this value may depend on the structure of your project.

But to make it simple, a value of 9 might be enough. Add one to your CSS z-index: 9 to his div:

#minhaDiv{
   z-index: 9;
}

1

You can use z-index to set the order of the elements. In this case, you want to overwrite all elements with your div, use the following:

    #suadiv{ 
    z-index: 99; /* 99 para que não tenha duvidas sobre os níveis de sobreposição */
}

You can check more about the z-index property directly on the W3schools website Clicking here.

Browser other questions tagged html css

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