CSS z-index 被页面上的元素顺序覆盖？
我已经在 IE7 中与 CSS z-index 斗争了几个小时，也许你可以提供帮助！
我有一个绝对定位的 div，出现在其父 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>
I've been battling with CSS z-index in IE7 foe a couple of hours now, maybe you can help!
I have a absolutely positioned div, appearing above its parent div, which is great. But - it appears under later divs that are siblings to its parent.
That seems like quite bizarre behavour, like the z-index only applies to the local scope of each div or something.
How can I set things up so that when I set an element to have a greater z-index than any other element on the page, it will appear on top regardless?
Here's my test page:
<!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>
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（4）
IE 有一个主要的 z-index 错误：
您可以尝试更改 z 索引，但如果您希望两个元素都出现，则可能必须将它们从其祖先结构中拉出，并使它们成为顶级 DOM 元素。
IE has a major z-index bug:
You could try to change z-indexes, but if you want both elements to appear, you might have to pull them out of their ancestor structure and make them top-level DOM elements.
具有position:absolute的元素将采用其容器内的绝对位置，特别是当该容器设置为position:relative时。
所有需要根据视口定位的position:absolute元素都应该位于DOM中“body”元素的正下方。通常认为将它们放在 html 代码的最后、结束正文标记之前是一种很好的做法。
An element with position:absolute will take the absolute position inside its container, especially if this container is set to position:relative.
All position:absolute elements that need to be positioned according to the viewport should come in the DOM directly under the "body" element. It is usually considered good practice to put them last in your html code, just before the closing body tag.
只需删除
position:relativeJust remove
position: relative图像可以有 style='z-index: #' 还是图像必须驻留在它自己的 div 中？
Can an image have a style='z-index: #' or must the image reside in a div of it's own?