Problem with positioning of div

Asked

Viewed 129 times

0

Good afternoon, you guys,

I’m doing a Dropdown menu on a website, I’m having the following difficulty, when I hover over the item, the subitens are below a plugin that uses banner.

Ex: If I put to hide the banner div (display:None), Subitem appears and is above the text correctly, but if I go back to Banner Div, the subitem is below the Benner image.

In subitens I’m using position Absolute, in the rotatory banner there are several images with position Absolute also.

There is how to define who should be in front?

javascript html css menu dropdown

  • In the div of your dropdown puts in your css z-index:9999;

4 answers

2


I don’t know your code. I would do the following, for example:

.divMae{position:relative; width:500px}
.divFilha{position:absolute;z-index:2; left:50%; margin-left:-250px}

With this, the divFilla will appear centered below the divMae. If it does not appear, it may be your z-index, just increase there.

0

So, it gets a little difficult without seeing your code, but replying to the question of the position of which div is in front, use the "z-index: 10" in css, the 10 is just to exemplify, you can sort according to which you want q to be in front. The higher the value ahead the div.

If you can make your idea available, use this site http://jsfiddle.net/, to put part of your html, css and javascript code, there is saved your prototype and you provide us the link and it is easier for everyone to interact.

0

Thank you Felipe Stoker,

with the z-Index solved even, I had to apply over the same daughter div you showed.

  • Just understand, that the divFilha has the negative margin that refers to half (-) the width of the divMae, This is done to center the div.

0

Friend, using z-index you can define how the layers (elements) are rendered by the browser.

Read this article, will help you.

Browser other questions tagged javascript html css menu dropdown

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