Shulou(Shulou.com)06/03 Report--

This article shows you an example analysis of the masking problem between absolute positioning elements in IE7. The content is concise and easy to understand, which will definitely brighten your eyes. I hope you can get something through the detailed introduction of this article.

Individuals support the above version of IE9 and think that their styles and effects are more humanized, but very often they still have to consider the feelings of other versions of browsers. IE6 does not have to consider him here. This product is simply a wonderful work in the history of IT. Here, there is a problem of element occlusion after the absolute and relative positioning of IE7.

Here's the problem:

Because of the complexity of the page, it is not a real example, an example.

Two elements of the same level, with position: relative; relative positioning set.

Their internal elements (no matter what) are set up with position: absolute

And the element in the first element needs to cross the display effect, to block the bottom, but at this time, on the contrary, it is covered by the latter (the one below is very unconvinced, is it or not).

Here I need a screenshot to demonstrate:

There are two tribes here: a red box with a yellow plate in it. Here we call it Little A.

There is a green plate in a blue box. Here we call it Little C (because Xiao B doesn't sound good, we don't call it).

First of all, the red box of small An and the blue box of small C are relative positioning (position: relative;), while the yellow plate of small An and the green plate of small C are absolute positioning (position: absolute). Here, it is said that the absolute positioning of the next two plates is relative to their parent elements. Students who do not understand can go to tutoring CSS.

What effect do I want to achieve here: move the mouse to the yellow plate, and then he can't bear to grow lonely, and then cover the little C below.

Take a look at the following picture:

This is the effect I want, but IE7 happens to be very stupid. Let's take a look at his effect:

It's crazy and cool. Very cool.

Some students must have said that it is better to set up a hierarchical relationship. This is a very good idea, but for whom? Many students, like me, first set up z-index:999 for the yellow section.

You can try, for this stupid IE7, it's outrageous, but he doesn't do it.

Talk about the right solution:

It is useless to set Jedi positioning elements here. You should set two relative positioning elements, namely, the red box of Little An and the blue box of Little C, and set their hierarchical relationship. Set the red box of Xiao A to z-talk index 999; (as long as the value is large enough).

Set the blue box of Xiao C to z talk indexbank 0; (smaller than the one smaller than A). And then the desired effect appeared. Ha ha ha

Of course, if it is not set, the above version of IE7 will not have this problem.

Here is my code, you can try it out.

The code is as follows:

.div1 {width: 300pxposition: 3px solid red;position: relative;z-index:999;} .div11 {width: 200pxheight: 60pxposition: absolute;left: 50pxtranstop: 10pxpolitical background: orange;} .div11: hover {height: 300px;} .div2 {margin-top: 10pxShiwidth: 300pxposition: 3px solid blue;position: relative;} .div21 {width: 280pxheight: 60pxposition: absolute;left: 10pxscape top: 10pxbackground: green } the above is an example analysis of the masking problem between absolute positioning elements in IE7. Have you learned any knowledge or skills? If you want to learn more skills or enrich your knowledge reserve, you are welcome to follow the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.