How to fix position absolute z-index bug in IE7

正常的我们做下拉菜单 和 幻灯片重叠在一起的时候,使用 z-index 就可以解决问题,正常的效果应该是这样:

magemenu-and-sliders

但是天杀的 IE7 却是这样:

magemenu-and-sliders-ie7

这时候任凭你怎么使用 position 和 z-index 都不会起作用!

可以到google搜索 ie7 position absolute z-index

一大堆解决方案。经常我几番研究,下面示范一个通俗易懂的解决方法:

先看一下我的代码结构:

code

这两个层的 z-index 的值大设置并没有多大关系,只要按照显示在上面的数字越大就可以了。

下面我们找到 mega menu 的根层 #header,给她家上两个css属性 {position: relative;z-index: 10;}

在找到 幻灯片 所在层的根层 #page ,加上 css 属性 {position: relative;z-index: 1;}

保存,测试,看看是不是在IE7 里也正常了。

无聊的可以拿下面的代码中各个浏览器里面试试,定能发现其中的奥妙,至于这是IE7 的什么bug,那就不管了~

<style><!--
.parent{width:200px; height:200px; padding:10px;}   .sub{text-align:right; font:15px Verdana;width:100px; height:100px;}   .lt50{left:50px;top:50px;}
--></style>
<div style="height:500px">
	<div style="position: relative; z-index: 10;">
		<div class="parent" style="position: absolute; background: lightgrey;">
			<div class="sub" style="position: absolute; z-index: 20; background: darkgray;">20</div>
			<div class="sub lt50" style="position: absolute; z-index: 10; background: dimgray;">10</div>
		</div>
	</div>
	<div style="position: relative; z-index: 1;">
		<div class="parent" style="position: absolute; left: 80px; top: 80px; background: black;">
			<div class="sub" style="position: absolute; z-index: 4; background: darkgray;">2</div>
			<div class="sub lt50" style="position: absolute; z-index: 2; background: dimgray;">1</div>
		</div>
	</div>
</div>

 

DEMO:

20
10
2
1

316 thoughts on “How to fix position absolute z-index bug in IE7

  1. What Equipment is Needed for Sling TV

    Hello there, just became aware of your blog through Google, and found that it’s truly
    informative. I am going to watch out for brussels. I will
    be grateful if you continue this in future.
    A lot of people will be benefited from your writing.
    Cheers!

  2. Sling TV

    This is my first time pay a visit at here and i am
    genuinely pleassant to read everthing at alone place.

  3. quest bars cheap

    Hey There. I found your blog using msn. This is a very well written article.
    I will be sure to bookmark it and come back to read more of your useful
    info. Thanks for the post. I will certainly return.

  4. Coconut Oil

    Hi to all, the contents existing at this website are in fact remarkable for people knowledge, well,
    keep up the nice work fellows.

  5. Coconut Oil Benefits

    This is the perfect site for anyone who hopes to find out about this topic.
    You realize so much its almost hard to argue with you (not that I personally will need to…HaHa).
    You certainly put a fresh spin on a topic that’s been written about
    for many years. Excellent stuff, just wonderful!

Comments are closed.