我已经在IE7敌人中与CSS z-index争夺了几个小时,也许你可以帮忙!
我有一个绝对定位的div,出现在它的父div之上,这很棒。但是 - 它出现在后来的div中,它们是其父母的兄弟姐妹。
这似乎很奇怪的行为,就像z-index只适用于每个div的局部范围。
如何进行设置,以便当我将元素设置为具有比页面上任何其他元素更大的z-index时,它将显示在顶部而不管?
这是我的测试页面:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>test</title>
</head>
<body>
<div style="position: relative; z-index: 0">
div1
<div style="position: relative; z-index: 0">
div2
</div>
<div style="color: red; background-color: #ffffff; position: absolute; z-index: 2">
div3
</div>
</div>
<div style="position: relative; z-index: 0">
div1
<div style="position: relative; z-index: 0">
div2
</div>
<div style="color: red; background-color: #ffffff; position: absolute; z-index: 2">
div3
</div>
</div>
<div style="position: relative; z-index: 0">
div1
<div style="position: relative; z-index: 0">
div2
</div>
<div style="color: red; background-color: #ffffff; position: absolute; z-index: 2">
div3
</div>
</div>
</body>
</html>
答案 0 :(得分:0)
具有position:absolute的元素将采用其容器内的绝对位置,尤其是当此容器设置为position:relative时。
所有位置:需要根据视口定位的绝对元素应直接位于“body”元素下的DOM中。通常认为将它们放在html代码中的最后一个,就在关闭正文标记之前。
答案 1 :(得分:0)
在Internet Explorer中定位 元素生成新的堆叠 上下文,以z-index值开头 因此,z-index不起作用 正确。
您可以尝试更改z索引,但如果您希望显示这两个元素,则可能必须将它们从其祖先结构中拉出来并使它们成为顶级DOM元素。
答案 2 :(得分:0)
只需删除position: relative
答案 3 :(得分:0)
图片可以有一个style ='z-index:#',还是图片必须位于它自己的div中?