1

製品または例にカーソルを合わせると、問題が表示されます。過去にこの問題に遭遇したことがあり、何が問題なのかを正確に知っている人がいるかもしれません。メニューとスライダーの両方のcssコードを使って、位置を絶対から相対に置き換えるなど、最善を尽くしました。画像の位置を絶対から継承に変更したときにほとんど答えが得られましたが、十分ではありませんでした。部分的にトリックを行います。一言で言えば、私は立ち往生しているので、他のアイデアをいただければ幸いです。

.lof-slidecontent { position:relative; overflow:hidden; border:#F4F4F4 solid 1px;}
.lof-slidecontent .preload{ height:100%; width:100%; position:absolute; top:0;   left:0;    z-index:100000; text-align:center; background:#FFF}
.lof-slidecontent .preload div{ height:100%;    width:100%; background:transparent url(../images/load-indicator.gif) no-repeat scroll 50% 50%;}

.lof-slidecontent  .sliders-wrapper{    position:relative;  height:100%;    width:900px;    z-index:3px;    overflow:hidden; }
.lof-slidecontent  ul.sliders-wrap-inner{overflow:hidden;   background:transparent url(../images/load-indicator.gif) no-repeat scroll 50% 50%;  padding:0px;    margin:0;   position:relative;  overflow:hidden;}
.lof-slidecontent  ul.sliders-wrap-inner li{overflow:hidden;    padding:0px;margin:0px; float:left; position:inherit;}
.lof-slidecontent  .lof-opacity  li{position:absolute;  top:0;  left:0;     float:inherit; }


.lof-slidecontent  .navigator-content {position:absolute; bottom:10px; right:10px;
background:url(../images/transparent_bg.png) repeat;
padding:5px 0px;
   }
.lof-slidecontent  .navigator-wrapper{  position:relative;  z-index:10;
height:180px;
width:310px;
overflow:hidden;
color:#FFF;
float:left
    }

このあたりのどこかで問題が発生する可能性があります。おそらくz-indexですか？

完全なコードと問題は次のとおりです。

http://jsfiddle.net/melbourne/vjG56/

4

1 に答える 1

0

position:とを次のようにメニューに追加z-indexします。

.menu, .menu ul {
    margin:0;
    padding:0;
    list-style:none;
    position:relative;
    z-index: 999;
}
于 2013-01-22T14:59:15.970 に答える