Question

其实我使用的是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必须显示得更高超过其他divs

我不明白为什么在所有浏览器中没有效果正常

Howewer退出一些修复，如果答案是肯定的，请告诉我如何解决它

谢谢，问候

Answer 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);
}

Answer 2

z-index更高的其他div必须显示在其他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>

CSS规则div { position:absolute }：在这种情况下，div c和d仍然位于b之上，因为c已经开启a的顶部和d也是如此。

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

如果设置正确，IE10应该根据标准完全处理所有Z-indexing，并且使用HTML5或其他格式正确的现代doctype 。请仔细检查您是否未将其置于怪癖模式。

z-index在Internet Explorer中不起作用

2 个答案: