z-index 在 Internet Explorer 中不起作用答案

【问题标题】：z-index doesn't work in Internet Explorerz-index 在 Internet Explorer 中不起作用
【发布时间】：2013-12-30 04:31:03
【问题描述】：

实际上我使用 Internet Explorer 10 并看到我的代码存在一些问题，此代码在所有浏览器中都可以正常工作，没有问题只会给我问题 IE

我的代码：

<style>
#web_header_sub_data
{
top:-60px;
position:relative;
width:980px;
height:96px;
margin:auto;
z-index:1;
}


#login_s_window_background
{
top:1px;    
position:absolute;
position:fixed;
left:50%;
margin-left:-50%;
width:100%;
height:150%;
background-color:#111111;
z-index:9;
background:rgb(17,17,17,0.7);
background:rgba(17,17,17,0.7);
}

</style>




<div id="web_header_sub_data">
<div id="login_s_window_background"></div>
</div>

在所有浏览器中，我看到名为 login_s_window_background 的 div 显示在所有 div 上，没有问题，只有 Internet Explorer 看到不好，在其他 div 下，你怎么看，z-index 它更高的其他 div 必须显示在其他 div 上

我不明白为什么没有在所有浏览器中都可以正常工作

Howewer 对此进行了一些修复，如果响应是肯定的，请告诉我如何修复它

谢谢，问候

【问题讨论】：

标签： internet-explorer css z-index

【解决方案1】：

您已经覆盖了规则。尝试将 div 属性替换为以下属性：

#login_s_window_background
{
   top:0;
   position:fixed;
   left:0;
   width:100%;
   height:100%;
   background-color:#111111;
   z-index:9;
   background:rgba(17,17,17,0.7);
}

【讨论】：

这不起作用，对不起，关于这个背景使用这 2 个位置并且适用于所有浏览器，但在 Internet Explorer 中不起作用，并且这个更改也不起作用，问题它的 z-index 被 IE 忽略了

【解决方案2】：

其他 div 更高的 z-index 必须显示在其他 div 之上

这是不正确的 - z-index 仅在相同的定位上下文中有效。新的定位上下文由 position 值为 fixed、relative 或 absolute 的元素启动。这种元素的后代元素永远不能在其自己的定位上下文中“突破”父级的 Z-index。

想象一下：

<div id="a" style="z-index:1">
    <div id="b" style="z-index:4">
</div>
<div id="c" style="z-index:2">
    <div id="d" style="z-index:3">
</div>

还有div { position:absolute } 的 CSS 规则：在这种情况下，c 和 d 仍将位于 b 之上，因为 c 已经在 a 和 d 之上自动也是如此。

由于这会使您的基本声明无效，因此您的整个 Z-index 结构可能会混乱，这很可能会导致您的渲染问题。

如果设置正确，并且使用 HTML5 或其他格式正确的现代文档类型，IE10 应该可以根据标准完美处理所有 Z 索引。请仔细检查您是否将其置于怪癖模式。

【讨论】：