Html CSS：除非我在IE8中指定背景色，否则超链接框不可单击

我正在尝试制作一个256x256px的透明可点击框，它位于3层之上，只需打开/关闭状态显示即可。我给3层的z索引为-1，超级链接框的z索引为5，所以它应该在顶部。这段代码在chrome和firefox中运行良好。奇怪的是，如果我为statuslink设置了一个背景色，它将显示并可单击。这是我的CSS文件：

.layer{position: absolute;left: 0px;top: 0px;z-index: -0;}
.map{position: absolute;left: 0px;top: 0px;z-index: 1;}
.headerarea{height: 200px; width: 100%; }
.header{ position: relative; text-align: center; width: 100%; }
.bodyarea{position: relative; width: 100%; height: 1000px;}
#logo1{float: left;border: 1px solid #dcdce9;}
#logo2{float: right;border: 1px solid #dcdce9;}
.roomlist ul{list-style: none; padding: 0;margin: 0; position: relative; }
.roomlist li{margin: 0 0.15em; float: left; position: absolute;}
#floor1{left: 0px;top: 0px;}
#floor2{left: 300px;top: 0px;}
.statuslink{ position: absolute; top: 30px; height: 256px; width: 256px; z-index: 5;}
.statusimg{position: absolute;left: 0px;top: 30px;z-index: -0; }
.menu{width:30em;position: absolute;left: 860px;top: 20px;}
.menu ul{list-style: none;padding: 0;margin: 0;}
.menu li{margin: 0 0.15em;}
.menu li a{background-color: white;height: 5em;line-height: 5em;width: 15em;display: block;border: 1px solid #dcdce9;color: #0d2474;text-decoration: none;text-align: center;}
.menu li a:hover{background-color: #dcdce9;height: 5em;line-height: 5em;width: 15em;display: block;border: 1px solid black;color: #0d2474;text-decoration: none;text-align: center;}
#loading {width: 300px;height: 100px;background-color: white;position: absolute;left: 20%;top: 40%;text-align: center;border: 4px solid #999999;z-index: 10;}
img{  border-style: none;}
body { font-family: Verdana; }
.led{position: absolute;}

这是我的HTML：

9.<div class="bodyarea">
10.        <div class="roomlist">
11.                <ul>
12.                        <li id="floor1"><b>Floor 1</b><br />
13.                        <a class="statuslink" href="C51a-bld.htm"></a>
14.                        <div class="statusimg" id="f1okon">
15.                                <img src="ok_on.gif" /></a>
16.                        </div>
17.                        <div class="statusimg" id="f1okoff">
18.                                <img src="ok_off.gif" /></a>
19.                        </div>
20.                        <div class="statusimg" id="f1fail">
21.                                <img src="fail.gif" /></a>
22.                        </div>
23.                        </li>
24.                        <li id="floor2"><b>Floor 2</b><br />
25.                        <a class="statuslink" href="C52a-bld.htm"></a>
26.                        <div class="statusimg" id="f2okon">
27.                                <img src="ok_on.gif" /></a>
28.                        </div>
29.                        <div class="statusimg" id="f2okoff">
30.                                <img src="ok_off.gif" /></a>
31.                        </div>
32.                        <div class="statusimg" id="f2fail">
33.                                <img src="fail.gif" /></a>
34.                        </div>
35.                        </li>
36.                </ul>
37.        </div>
38.</div>

---

请有人给我指路好吗。我的css知识非常薄弱。

看起来你的链接在绝对定位的div之外。当div重新定位它们时，链接不知道去哪里

另外，看起来你有一些额外的标签。比较下面的源代码以查看更改

<div class="bodyarea">
        <div class="roomlist">
                <ul>
                        <li id="floor1"><b>Floor 1</b><br />                        
                            <div class="statusimg" id="f1okon"><a class="statuslink" href="C51a-bld.htm"><img src="ok_on.gif" /></a></div>
                            <div class="statusimg" id="f1okoff"><a class="statuslink" href="C51a-bld.htm"><img src="ok_off.gif" /></a></div>
                            <div class="statusimg" id="f1fail"><a class="statuslink" href="C51a-bld.htm"><img src="fail.gif" /></a></div>
                        </a>
                        </li>
                        <li id="floor2"><b>Floor 2</b><br />
                        <a class="statuslink" href="C52a-bld.htm">
                            <div class="statusimg" id="f2okon"><img src="ok_on.gif" /></div>
                            <div class="statusimg" id="f2okoff"><img src="ok_off.gif" /></div>
                            <div class="statusimg" id="f2fail"><img src="fail.gif" /></div>
                        </a>
                        </li>
                </ul>
        </div>
</div>

---

IE8是否支持负z索引？我只记得旧版本没有，你能在css中使用更多的换行吗？因为没有新词，我读起来真的很困难。