サイクルIE7レイヤー

StackOverflow https://stackoverflow.com/questions/5301488

  •  22-10-2019
  •  | 
  •  

質問

jQueryサイクルプラグインを使用して切り替える写真の上に「ホバリング」する小さなDIVを使用するのに問題があります。写真の幅は950pxで、写真の上に右側には、小さな箱が最新のニュースを備えている必要があります。

問題はコンパビリティモードであることです。つまり、ボックスはz-indexであり、写真の後ろに終わるように見えます。 IE8、Opera、Chrome、Firefoxで動作します。

私は2枚の写真を削除しようとしたので、写真が1枚だけ表示された後、何らかの理由でCompabilityModeで動作します。私はIMGタグの間に自家たちを削除しようとしましたが、運はありません、マージン：0。パディング：0は0ですが、運はありません

誰かが何が間違っているのかというアイデアを持っていますか？

CSSコード

#Content {
    width: 950px;   
}
#NewsWrapper {
    position: relative;
    padding: 0;
    margin: 0;
    top: 0;
}
#NewsListning {
    float: right;
    height: 200px;
    margin: 0;
    padding: 10px;
    background: yellow;
    top: 0;
    right: 0;
    position: absolute;
    z-index: 12;
    width: 300px;
}
#SlideImages {
    width: 100%;
    margin: 0; 
    padding: 0; 
    float: left; 
    z-index: 11;
}
.SlideImage {
    display: inline;
    float: left;
    padding: 0;
    margin: 0;
    z-index: 11;
}

JavaScriptコード

$(function () {
  $('#SlideImages').cycle({
    fx: 'fade',
    speed: 5000
  });
});

HTMLコード

<div id="Content">
<div id="SlideImages">
    <img src="/Images/Slide1.jpg" class="SlideImage" />
    <img src="/Images/Slide2.jpg" class="SlideImage" />
    <img src="/Images/Slide3.jpg" class="SlideImage" />
</div>

<div id="NewsWrapper">
  <div id="NewsListning">
    <div>
      <strong>Test 2</strong> 
      Lorem ipsum
    </div>
  </div>
</div>
  • 解決済み - 追加のメモ*

すべてのブラウザーでは、IE7では、たとえばTOP：0を指定する必要があります。左：0ポジションを使用する場合：絶対。そうでなければ、それは通常サイトの右になります。 IE7に関しては意味をなさない別のこと。

役に立ちましたか？

解決

#newswrapperを#newslistingよりも高いインデックスとして配置します

それはうまくいくはずです

また、サイクルのコードを見ていませんが、12よりも高いZ-Indexを使用していると仮定しています。おそらく使用したいと思うでしょう。 z-index 画面上で最も前向きになりたいものについては1000> 1000。

同様の問題で本当に苦労しました。 （CSSドロップダウンバナーの下に行く）私はCSSを使用して最終的にそれを修正し、親を変更しました div Nav全体を穴を開ける position:absolute そして本当に高い z-index しかし、私はテストしました これ そして、それは本当にうまくいきました。

ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top