Doubt about z-index in separate Ivs

Asked

Viewed 884 times

1

I have the following code:

.div1{
    position: absolute;
    z-index:2;
}
.div2{
    position: absolute;
    z-index:1
}

To .div2 has an image that is on top of the .div1, a few pixels only.

What happens is that in .div1 I have a menu dropdown that is as standard display:none, when I mouse him, he gets display:block and z-index:3, only that z-index is not above the .div2 because he’s inside the .div1 that has z-index minor, there is some solution to this?

css z-index
  • 1

    Not long ago I had this problem, what I did was move the dropdown out of the div, but put it in the same place.

  • True dude, I did it here and it worked. Too bad I missed the references to position:relative used to center 100% without using margin

  • I was with the same problem solved by putting the aributo position:Fixed; in the div.

2 answers

4


z-index is an anthill. It is best to really put the element that will stand over the outside. Place modals windows and prompts inside the <body> to avoid conflicts.

To better understand why this problem, let’s take a look at how z-index works:

Adapted from MDN:

  • Assigning a z-index value to an element creates a "stacking context".
  • Stacking contexts may be contained in other context. Together they create a hierarchy of stacking contexts.
  • Each context is completely independent of its siblings: only descending elements are considered when stacking is processed.
  • Each stacking context is contained in itself: after the content of an element is stacked, the whole element is considered in the order of the parent stacking context.

It’s complicated, isn’t it?

Let’s take a look at this structure: 

            z-index
div A       2
 |--div AA  1
 |--div AB  2

div B       1
 |--div BA  3
 |--div BB  4

In this scheme div A has z-index 2 and B has z-index 1. All Divs within Div B will also have z-index 1 when compared to Div A and its daughter Ivs.
The values 3 and 4 of BA and BB are only valid among themselves, as they are in the same context (level).

One way to "break" the structure is to assign a negative value to the z-index of a daughter div, but note that this approach does not work in IE 6/7.

  • I will try to inform a negative z-index, I believe it is the solution. Thank you very much

0

Use position:relative in the div or ul that you want to be on top of. position:relative by itself already makes the element "move up" a level on your page.

Browser other questions tagged css z-index

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