1

根据：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 和类选择器的组合，z-index 属性设置为“99999999999”，但有一个内联定义，应该将其 CSS 覆盖为“99999999998”
  • blueDiv 将内联 css 设置为 "99999999999" 。

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

谁能指出可能是什么问题？

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

错误覆盖的 JSFiddle 示例

4

1 回答 1

1

我将对此进行尝试并同意这些评论。您的数字大于 32 位整数，并且我确信最大 z-index（无论可能是什么）都小于该数字，并且可能是您的问题的原因，但我尚未对其进行测试。尝试将其减少到类似 ... 9 的内容，看看会发生什么。

于 2013-04-01T17:26:00.883 回答