Warning: file_get_contents(/data/phpspider/zhask/data//catemap/7/css/41.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Css IE9中的z索引分层,例如,检查堆叠上下文(我认为)_Css_Internet Explorer_Z Index - Fatal编程技术网

Css IE9中的z索引分层,例如,检查堆叠上下文(我认为)

Css IE9中的z索引分层,例如,检查堆叠上下文(我认为),css,internet-explorer,z-index,Css,Internet Explorer,Z Index,我正在做一个投资组合项目。我在一个相对定位的div中有一个相对定位的图像。使用z-index,我在上面有一个固定位置的div,其中有三个浮动div,每个div都有一个css中指定的游标url。所有这些都在另一个分区中。其目的是在图像顶部显示“上一个”、“播放”和“下一个”光标,以控制图像的显示 它在Safari、Firefox和Chrome中运行良好。它在IE(9、8或7)中不起作用。光标在图像上时不显示。不知何故,固定位置div正落在图像后面,尽管z-index表示它应该在上面 我在这方面读了

我正在做一个投资组合项目。我在一个相对定位的div中有一个相对定位的图像。使用z-index,我在上面有一个固定位置的div,其中有三个浮动div,每个div都有一个css中指定的游标url。所有这些都在另一个分区中。其目的是在图像顶部显示“上一个”、“播放”和“下一个”光标,以控制图像的显示

它在Safari、Firefox和Chrome中运行良好。它在IE(9、8或7)中不起作用。光标在图像上时不显示。不知何故,固定位置div正落在图像后面,尽管z-index表示它应该在上面

我在这方面读了很多书。我已经考虑了堆叠上下文,我相信它们在我的代码中是可以的。我已经研究过使所有对象具有相对定位,以防固定和相对定位创建不同的堆叠上下文。这并没有解决问题。我调查了怪癖和标准模式。似乎什么都不管用

我已将我的问题的示例页面上传到此处:

非常感谢您的帮助。我已经调试了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 -->

不幸的是,IE在使用游标时非常笨拙。这实际上不是一个z指数问题。分层按预期进行。您可以通过在#导航面板覆盖图像时在其上放置背景色来测试这一点。它与IE和游标的行为有关

解决方案:(针对IE9)


您可能可以使用过滤器修复早期版本的IE

非常感谢你。我没有想到这可能是一个光标问题(奇怪的)!这就解决了问题。太棒了。花了我一段时间,但我想我已经接受了,点击勾号。
#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;
}
/* Background with no opacity */
#navigation-panel {
    background: rgba(0, 0, 0, 0);
}