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

About IE7 z-index browser compatibility problem perfect solution is what, many novices are not very clear about this, in order to help you solve this problem, the following editor will explain for you in detail, people with this need can come to learn, I hope you can gain something.

The problem of browser compatibility is so painful that today it is over the z-index problem of IE7. But it can not be solved because of the low version of the browser, after all, from the user's point of view. Baidu still can not solve a lot of problems, finally google for a while, found a way.

Go straight to the example:

The code is as follows:

This box should be on top

This box should not be on top

IE however seems to create a new stacking context for positioned elements

Even when the computed z-index of that element is' auto'.

The code is as follows:

Body {margin: 0; padding: 0;}

# container {position: relative;}

# box1 {position: absolute; top: 100px; left: 510px; width: 200px; height: 200px; background-color: yellow;z-index:20;}

# box2 {position: absolute; top: 50px; left: 460px; width: 200px; height: 200px; background-color: lime; z-index: 10;}

Why is that? In fact, this is a BUG-- of the IE browser. In the IE browser, the location element generates a new stacking context, starting with the value of z-index 0. So we need to set a higher z-index value on the parent of this element.

Setting a larger z-index in the parent element container in the box1 above will solve this problem.

The code is as follows:

Body {margin: 0; padding: 0;}

# container {position: relative; zindex30;}

# box1 {position: absolute; top: 100px; left: 510px; width: 200px; height: 200px; background-color: yellow;}

/ / it doesn't matter whether box1 has z-index or not, but it must be used with position (relative or absolute), just like a person

/ / like not having a baby, you need to cooperate.

# box2 {position: absolute; top: 50px; left: 460px; width: 200px; height: 200px; background-color: lime; z-index: 20;}

In order to cover the siblings of the father, the z-index of the father must be other big, which is just like fighting for the father. If the father is strong, you are strong. This is the legendary philosophy.

Is it helpful for you to read the above content? If you want to know more about the relevant knowledge or read more related articles, please follow the industry information channel, thank you for your support.

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.