jQuery 显示和 z-index

Question

以下代码未按预期工作：

编辑：
抱歉造成误解，我过于简化了我的问题，这是我面临的真正问题：http://jsfiddle。网/bc6hr/

HTML:

<div id="1">div 1</div>
<div id="2">div 2</div>

CSS:

div {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    background: white;
}
#1 {
    z-index: 2;
}

JS (jQuery):

$("div").hide();
$("#1").show();
$("#2").show();

我一定错过了一些东西，因为据我所知，这段代码应该显示“div 1”淡入“div 2”，但它实际上从一开始就渲染“div 2”。
知道我之前必须隐藏所有 div，如何让它显示“div 1”？我认为使用 z-index 是一个很好的尝试，但也许我错了......

Answer 1

首先，您的 id 属性无效。 id 不能以数字开头。

更新了您的jsfiddle。

Answer 2

将您的 ID 更改为有效的 ID ...（不能以数字开头）

示例 http://jsfiddle.net/mBWcM/3/

Answer 3

我相信 id 不能以数字开头。当 div 的 id 更改为 d1 和 d2 时，它们将起作用：

http://jsfiddle.net/mBWcM/4/

Answer 4

问题是，1 和 2 不是有效的 ID。因此 jQuery 或 CSS 解析器都无法识别该元素。使用 a 和 b 来代替并查看它的工作原理：http: //jsfiddle.net/mBWcM/1/

问题是，当您在 JavaScript 中调用 z-index 更改时，div 甚至不存在（代码位于 head 中 元素并立即执行）。请参阅 fiddler 页面的源代码。

解决方法：拥抱“当 DOM 准备就绪时开始”构造中的所有内容：

jQuery(document).ready(function () {
   // your code here
});

编辑： 实际上，我认为这是一个 jsFiddle 问题。当我重新加载页面一两次时，“div1”仍然可见，其他时候，它是“div2”。我刚刚看到，jsFiddle 确实将代码包装在 window.onload 等效项中。