我正在做一个投资组合项目。我在相对定位的 div 中有一个相对定位的图像。使用 z-index,我在其顶部有一个固定位置的 div,其中有三个浮动 div,每个 div 都有一个在 css 中指定的光标 url。所有这些都在另一个 div 中。目的是在图像顶部显示上一个、播放和下一个光标,以控制图像的显示。
它在 Safari、Firefox、Chrome 中运行良好。它在 IE(9,8 或 7)中不起作用。光标在图像上时不显示。不知何故,固定位置 div 落在图像后面,即使它的 z-index 说它应该在上面。
我已经阅读了很多这方面的内容。我已经考虑了堆叠上下文,并且我相信它们在我的代码中是可以的。我研究过让所有对象都具有相对定位,以防固定和相对定位创建不同的堆叠上下文。这并没有解决它。我研究了怪癖和标准模式。似乎没有任何效果。
我在这里上传了我的问题的剥离示例页面:
http://bigflannel.com/portfolio/ie-test
非常感谢任何帮助。我进行了 8 个小时的调试并卡住了。
的HTML
<div id ="website">
<div id="media-panel">
<img id="image0" class="image" src="http://bigflannel.com/portfolio/admin/albums/album-5/lg/fk01117.jpg">
</div><!-- #media-panel -->
<div id="navigation-panel">
<div id="left-area"></div>
<div id="play-pause-area"></div>
<div id="right-area"></div>
</div><!-- #navigation-panel -->
</div><!-- #website -->
CSS
#website {
position: relative;
z-index: 0;
}
#media-panel {
position: relative;
height: 600px;
z-index: 1;
}
.image {
position: relative;
max-height: 600px;
max-width: 600px;
z-index: 0;
}
#navigation-panel {
position: fixed;
z-index: 9998;
top: 0;
left: 0;
width: 1500px;
height: 900px;
}
#left-area {
position: relative;
float: left;
cursor: url(http://bigflannel.com/development/mobileApp/bigflannel-portfolio/images/prevL.cur), auto;
width: 500px;
height: 900px;
}
#play-pause-area {
position: relative;
float: left;
cursor: url(http://bigflannel.com/development/mobileApp/bigflannel-portfolio/images/playL.cur), auto;
width: 500px;
height: 900px;
}
#right-area {
position: relative;
float: left;
cursor: url(http://bigflannel.com/development/mobileApp/bigflannel-portfolio/images/nextL.cur), auto;
width: 500px;
height: 900px;
}