The problem of masking between absolutely positioned elements in IE7

Because of the complexity of the page is not a practical example, illustrate.

Two same-level <div> elements, all set position:relative, relative positioning.

Their internal elements (whatever the elements are) are set to Position:absolute;

The elements in the first <div> element need to be shown across the display, to obscure the <div> below, but at this time, on the contrary, it is obscured by the latter (under the <div> is not convinced, there is wood).

Here I need to demonstrate:


There are two tribes here: a red box with a yellow plate here we call it small a

a blue box with a green plate here we call it small C (because small b doesn't sound good, we don't call it)

First of all, small A's red box and small C's blue box are relative positioning (position:relative;), while the yellow plate of small A and the green plate of small c are absolute positioning (position:absolute), Here the next two plate absolute positioning are relative to their own parent elements, do not know the students can go to cram under the CSS.
What I want to achieve here: the mouse moved to the yellow plate, and then he was not tolerant of the loneliness of the longer, and then cover the following small c.

Effect:


This is what I want to effect, but IE7 is very two goods of the inverse of the day, we look at his effect:



Almost crazy cool dick bombing days ah.

Some students must have said, set a hierarchy relationship. This is a very good approach, but who is it to set? Many classmates and I like the first to set the yellow plate z-index:999;

You can try it, for this two goods IE7, it is outrageous, he just do not do so.

(don't say more, otherwise people say I'm here to tease, I'm not a monkey sent to tease.)

say the correct solution:

It is useless to set the elements of the Jedi position here, you should set two relative positioning elements, that is, the red box of small A, and the blue box of the small C, setting their hierarchical relationship. Set the z-index:999 to the red box for small A, as long as the value is large enough. The

sets z-index:0 for the blue box of small c, which is smaller than small a. And then we expect the effect to come up. Hahaha

Of course not set the words IE7 above will not have this problem oh.

(Reproduced in: http://www.jb51.net/css/148606.html)

The problem of masking between absolutely positioned elements in IE7