1

ページで「ぎこちないショーケース」を実行していますが、上にドロップダウンメニューがあります。問題は、ショーケースがメニューと重なっていて、完全に表示されていないことです。

z-indexの変更を修正することはできますが、次のように設定した場合にのみ機能します。

厄介なショーケースへの負のインデックス

ドロップダウンメニューへの正のインデックス

このため、ショーケースにはトラフスライダーをナビゲートするための矢印があるため、それぞれをクリックする方法はありません。それら(矢印)は透明なレイヤーの後ろにあるように見えます。これは、表示されているが非アクティブであるためです。

私のコード:

メニュー

    <div id="navmenucontainer">
<ul id="navmenu">
    <li class="main" onclick="javascript: Mostrar(this);" id="menitem1"><a href="#" class="item">Productores</a>
        <div class="sub" onmouseout="setTimeout('Cierro(this)', 1000);" onmouseover="Sigue(this);" style="width:204px; overflow:hidden;">
         Some menu items
    </div>
    </li>
    </ul>
   </div>

スライドショー

<div id="showcase" class="showcase">
                            <div class="showcase-slide">
                                <div class="showcase-content">
                                    <div class="showcase-content-wrapper">
                                       <img src="images/1.jpg">
                                    </div>
                                </div>
                                <div class="showcase-caption">

                                </div>
                             </div>

CSS

#navmenucontainer {
    z-index:999999;
}

*/ul#navmenu div.sub{
    display: none;
    background: url('images/menu/bgcat.png') repeat-x bottom #FFF;
    position: absolute;
    top:26;
    left:0;
    vertical-align:top;
    padding-top:0;
    padding-bottom: 22px;
    width:1240px;
    /*border-right:1px solid silver;*/
    border:1px solid silver;
    z-index:99999;
    zoom:1;
}

ul#navmenu li {
  margin: 0;
  /*border: 0 none;*/
  padding: 0;
  float:left; /*For Gecko*/
  display: inline;
  list-style: none;
  height: 20px;
}

ul#navmenu ul {
  margin: 0;
  padding: 0;
  float:left;
  width:100%;
}

.showcase
{
    position: relative;
    z-index:-1;
    margin: 0;
}

重複は「.sub」divと「.showcase」で発生します。

4

1 に答える 1

0

これはロングショットですが、結局のところ IE であるため... (ほぼ) 正しいか、災害である可能性があります.. 私は同じ問題に遭遇しましたが、運によって毎回異なる解決策です.. (IE以前のコメントを引用して同意するだけです)

これをhtmlに追加します

     <!--[if IE]>
<style type="text/css">

#navmenucontainer {
      z-index:3000;
}

ul#navmenu {
      z-index:2000;
}

ul#navmenu div.sub {
      z-index:1000;
}

.showcase {
      position: relative;
      z-index:0;
      margin: 0;
}
        </style>
        <![endif]-->

http://brenelz.com/blog/squish-the-internet-explorer-z-index-bug/から着想

于 2012-06-01T13:53:01.727 に答える