The problem of masking between absolutely positioned elements in IE7

Source: Internet
Author: User

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

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.