绝对覆盖div元素不覆盖相对定位元素

在IE7浏览器中，我刚刚遇到一个关于位置的问题。我做了一个演示页面来测试相对和绝对的位置条件。有下面的相关代码：绝对覆盖div元素不覆盖相对定位元素

[CSS]

.rela{ 
    width:200px; 
    height:100px; 
    background:#EEE; 
    margin-bottom:10px; 
    position:relative; 
} 
.abs{ 
    width:50px; 
    height:50px; 
    position:absolute; 
    background:#333; 
    left:20px; 
    top:80px; 
    z-index:10; 
}

[HTML]现在

<div class="rela"><div class="abs"></div></div> 
<div class="rela"><div class="abs"></div></div> 
<div class="rela"><div class="abs"></div></div> 
<div class="rela"><div class="abs"></div></div>

，问题是，在IE7浏览器中， “ABS” 元件由覆盖下一个“rela”元素，但它在Firefox，Chrome，IE8等其他浏览器中表现良好。我知道有人说我们可以为父“rela”元素添加更高的z-index，但对于上面的代码，这个问题不能在这种情况下修复，因为有两个以上的rela元素和所有他们有abs元素。

我不知道如何解决它现在。此外，如果有人能够提供关于这个“错误”的官方解释，它将会非常好。

enter image description here

来源

2011-12-30 init.Monk

啊... IE。微软MVP在行动。 – 2011-12-30 14:02:33

加到。显示：表格;'可能工作。未经测试 – 2011-12-30 14:06:54

对不起，（只）添加'display：table;'到'.rela'不起作用 – scessor 2011-12-30 14:22:14

同样的问题被问here。

不要问我为什么，但最后的答案似乎解决这个问题（尽管你需要的jQuery等）：

http://jsfiddle.net/Xmznn/1/

来源

2011-12-30 14:07:07 ptriek

js方法可以解决这个问题，但我只想知道是否有一种方法只能用CSS来做到这一点？ – 2011-12-30 14:18:49

这种方式可以遍历所有匹配的元素，并将它的'z-index'属性设置为比其前一个元素更低的值。我不认为它是解决问题的好方法。 – 2011-12-30 14:28:57

尝试增加

z-index : 0;

要div.rela

来源

2011-12-30 13:57:51

对不起，它不适合我。 – 2011-12-30 14:03:19

或者你可以让你的网站说“为什么IE？”每当有人使用它的IE浏览器！它在IE8 +上工作吗？我放弃了试用IE7，更不用说6！ – 2011-12-30 14:07:02

是的，它在IE8 +和其他浏览器上运行良好。我为我的网站放弃了IE 6和7。但这是我公司项目的要求。 – 2011-12-30 14:13:03

知道的问题，有据可查的在那里。支票 - http://brenelz.com/blog/squish-the-internet-explorer-z-index-bug/

这可能会帮助你。

来源

2011-12-30 14:07:58

呃，我刚刚发现这个网站，它的条件与我的不符，所有这些元素都需要解决这个问题，如果是的话，就等于不要向父元素添加更高的z-index。 – 2011-12-30 14:17:40

无论如何，它归结于相同的错误。如果你看看scessor的回应，那实际上是可行的。 – 2011-12-30 16:01:38

是的，“js解决方案”与scessor的解决方案一样。我想也许这是解决这个问题的唯一方法。非常感谢。 – 2011-12-30 16:46:44

全部给出div s同类rela和z-index，第一个是最高值，最低值是最低值。

<div class="rela" style="z-index: 40;"><div class="abs"></div></div> 
<div class="rela" style="z-index: 30;"><div class="abs"></div></div> 
<div class="rela" style="z-index: 20;"><div class="abs"></div></div> 
<div class="rela" style="z-index: 10;"><div class="abs"></div></div>

另请参阅此example。

来源

2011-12-30 14:12:04 scessor

这与“js解决方案”几乎相同，可以为元素设置比前一个值更低的值。但我认为它不是一个好方法。 – 2011-12-30 14:30:35

这并不好，但我担心这是唯一的选择。 – scessor 2011-12-30 14:38:48

我也感到有点悲观，也许没有其他方法可以解决它。 – 2011-12-30 14:48:39

看到的变化，它是在IE 7

.rela{ 
    width:200px; 
    height:100px; 
    background:#EEE; 
    margin-bottom:10px; 
} 

.abs{ 
    width:50px; 
    height:50px; 
    background:#333; 
    margin:80px 0 0 20px; 
    z-index:0; 
    position:absolute; 
}

来源

2011-12-30 14:38:35 manny

从'.rela'中删除'position：relative;'会导致'.abs'失去参考点，所以实际上'.abs'元素都位于相同的位置。 – 2011-12-30 14:41:57

你测试过这段代码吗，因为它在IE7,8和9，Firefox，Chrome，safari和Opera中都能正常工作吗？ – manny 2011-12-30 14:46:38

我知道，它看起来很有效，但actullay，所有这四个'.abs'位于相同的地方，它们被相互覆盖。 – 2011-12-30 14:51:16

工作有一个有用的resource来解决这个问题。长话短说，如果你绝对放置的div（.abs）是空的，IE不喜欢将它放在其他元素的前面，而不管z-index如何。您可以使用1x1透明gif来克服这个问题，例如。通过在div上设置类似以下的样式：

.abs { 
    background: transparent url('/images/clear.gif') repeat 0 0; 
}

我发现这有帮助。这很好，因为只需要很少的附加样式，而且您不必明确管理z索引。

来源

2013-08-14 20:38:37

绝对覆盖div元素不覆盖相对定位元素

回答

相关问题