私はポートフォリオプロジェクトに取り組んでいます。相対的に配置されたdivに相対的に配置された画像があります。z-index を使用すると、この上に固定位置の div があり、その中に 3 つのフローティング 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;
}