为什么z-index：99999999999;禁用内联样式定义？

Question

Acording到：mozilla.org

CSS匹配的优先级如下：

• 通用选择
• 类型选择
• 类选择
• 属性选择器
• 伪类
• ID选择器
• 内嵌样式

CSS代码：

body div#redDiv.myClass{ 
    position:absolute; 
    top:10px; 
    left:10px; 
    width:10px; 
    height:10px; 
    background-color:red; 
    z-index:99999999999; 
} 
#blueDiv{ 
    position:absolute; 
    top:15px; 
    left:15px; 
    width:10px; 
    height:10px; 
    background-color:blue; 
} 

HTML：

<div id="blueDiv" style="z-index:99999999999;"></div> 
<div id="redDiv" class="myClass" style="z-index:99999999998;"></div> 

因此给予2个的div，redDiv和blueDiv其中：

• redDiv有CSS定义使用body id和class selector的组合具有z-index支撑erty设置为“99999999999”，但有一个内联定义，应该将其css覆盖为“99999999998”
• blueDiv将内联css设置为“99999999999”。

预期的行为应该是redDiv上方的blueDiv，但是会发生相反的情况，它几乎就像覆盖没有完成！但是，如果值较小，如“99”和“98”，blueDiv高于redDiv（http://jsfiddle.net/9U2fU/1/）。

任何人都可以指出可能是什么问题？

我无法更改redDiv的原始CSS，所以我需要通过添加内联样式定义来解决问题。

JSFiddle example of wrong override

Answer 1

我要带刺这一点，并同意上司的评价。你的数字大于一个32位的整数，我敢肯定，最大的z-index，不管怎么说，都小于这个数字，可能是你的问题的原因，但我没有测试它。尝试减少它到... 9，看看会发生什么。