IE7 相对 Div 内的绝对 Div 消失。 z-index 不能解决问题
我在 SO 上找到的每个问题都列出了 z-index 修复作为解决方案。不幸的是，这似乎对我不起作用。
这是我的结构：
- body
- div 包装器
- div 标题
- div 主
- div 页面容器
- div 页面背景图像
- div 页面底部渐变
- div 页面背景图像
- div 主要
- div 左侧菜单
- div 外容器
- 等等...
- div 页面容器
- div 页脚
这是 CSS
body {
color: #666;
font-size: 12px;
line-height: 18px;
background: url(images/bg-stripes.gif) repeat bottom left;
font-family: "Helvetica Neue", Arial, Helvetica, "Nimbus Sans L", sans-serif;
border: 0;
margin: 0;
padding: 0;
vertical-align: baseline;
}
#wrapper {
position: relative;
margin: 0 auto;
width: 1280px;
padding-top: 30px;
background: transparent;
vertical-align: baseline;
z-index: 0;
}
#main {
position: relative;
clear: both;
overflow: hidden;
padding: 0 0 0 0;
background: #DDD;
z-index: 0;
margin: 0 auto;
width: 1280px;
}
#page-container {
padding: 0 0 0 0;
position: relative;
z-index: 2;
}
#page-background-image {
position: absolute;
left: 0;
top: 0;
width: 460px;
height: auto;
z-index: 1;
overflow: hidden;
}
看起来上面结构中的粗体部分被放置在主 div 后面。删除“位置：绝对；”来自 #page-background-image 解决了这个问题，但显然删除了绝对位置并搞乱了布局。为树中的每个元素设置 z 索引不会改变任何事情，无论我使用从高到低的索引还是从低到高的索引。是否还有其他问题导致了这种影响？我不想将其设置为背景图像，因为图像是动态拉取和放置的。
Every question I've found on SO lists the z-index fix as the solution. This, unfortunately, does not seem to work for me.
Here's my structure:
- body
- div wrapper
- div header
- div main
- div page-container
- div page-background-image
- div page-bottom-gradient
- div page-background-image
- div primary
- div left-menu
- div outer-container
- etc...
- div page-container
- div footer
Here's the CSS
body {
color: #666;
font-size: 12px;
line-height: 18px;
background: url(images/bg-stripes.gif) repeat bottom left;
font-family: "Helvetica Neue", Arial, Helvetica, "Nimbus Sans L", sans-serif;
border: 0;
margin: 0;
padding: 0;
vertical-align: baseline;
}
#wrapper {
position: relative;
margin: 0 auto;
width: 1280px;
padding-top: 30px;
background: transparent;
vertical-align: baseline;
z-index: 0;
}
#main {
position: relative;
clear: both;
overflow: hidden;
padding: 0 0 0 0;
background: #DDD;
z-index: 0;
margin: 0 auto;
width: 1280px;
}
#page-container {
padding: 0 0 0 0;
position: relative;
z-index: 2;
}
#page-background-image {
position: absolute;
left: 0;
top: 0;
width: 460px;
height: auto;
z-index: 1;
overflow: hidden;
}
It appears that the bold section within the structure above is being placed behind the main div. Removing "position: absolute;" from #page-background-image fixes the issue, but obviously removes the absolute position and screws up the layout. Setting a z-index for each element in the tree does not change a thing, regardless of whether I use high-to-low indexes or low-to-high. Could there be another issue that's causing this effect? I'd rather not resort to setting this as a background image, since the image is pulled and placed dynamically.
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
请始终记住，如果您应用
z-index，则还必须将position应用为relative或absolute。默认情况下，div将此设置为static，因此z-index被忽略。在
#main上，您应用了z-index，但没有应用position- 这可能会导致问题。Always remember that if you are applying
z-index, you must also applypositionasrelativeorabsolute. By default, adivhas this set tostaticsoz-indexis ignored.On
#mainyou have az-indexapplied, but notposition- this could be causing a problem.事实证明，问题在于其他 div 树中存在一个浮动 div。那个浮动的div杀死了所有非静态的祖先（直到#main）。解决方案是在浮动 div 之前添加一个空 div。
Turns out the issue was that there was a floating div inside this tree of other divs. That floating div killed every ancestor that not static (which went until #main). The solution was to add an empty div immediately before the floating div.