2012-03-02 6 views
0

私のサイトのヘッダーには、クリックするとポップアップが表示されます。 、(ボタンのすぐ下)顧客がサイトを検索できるようにします。これを行うにはCSS IE7のバグ - 他の配置されたdivによってブロックされている絶対divに影響するz-indexやその他のプロパティ

私のjQueryのコード:

<script type='text/javascript'> 
$(document).ready(function() { 
    $('#search-my-size-inner').click(function() { 
     $('#search-my-size-lightbox').toggle(); 
     $("#search-my-size-lightbox").css("z-index","1000"); 
    }); 
});  
</script> 

私のdiv、検索私のサイズ-ライトボックスには、以下のCSSを持っています。

.lightbox-search-my-size { color: #673645; opacity: 0.9; filter:alpha(opacity=90); background: #fff; } 
#search-my-size-lightbox { position: absolute; width:390px; right: 0; top: 26px; display: none; } 

そして、div要素がある:

<div id='search-my-size-lightbox' class='lightbox-search-my-size'>my content </div> 

これはIE7を除くすべてのブラウザで正常に動作します。私はCSSからそうすることができるので、 'z-index'は不要ですが、IE7の試用に値するものでしたが、まだバグを修正していませんでした。

divは、以下の他の絶対的な要素と相対的な要素によって「隠されている」(またはブロックされている)ということです。 "/ body"タグの前にdivを移動すると、divが表示されます。しかし、私は親の "相対"タグ内のコード内で、位置が正しくなるようにそれを必要とします。

divは通常のコンテンツよりも細かいことを示しています。ヘッダーの下にいくつかの大きなホームページバナーがあり、ポップアップコンテンツをブロックするいくつかの相対divと絶対divがあります。これらの「位置」属性を削除した場合、ポップアップは正常に表示されますが、ホームページのバナーのレイアウトが乱れているため、これは解決策ではありません。

また、#search-my-size-lightboxをposition:relativeに変更すると、動作しますが、コンテンツをプッシュダウンするだけで、絶対的なポップアップのようなdivが必要です。

次のように便利になりますが、私のために動作していないよう: 1. Positioning divs with z-Index in Internet Explorer 7 2. http://www.sitepoint.com/fix-disappearing-absolute-position-element-ie/ 3. IE7 relative/absolute positioning bug with dynamically modified page content

何かアドバイスをいただければ幸いです、 多くの感謝を!

答えて

0

この問題は、スタッキングのコンテキストに関連しているようです。 z-indexプロパティは、単一の親の子の積み上げ順序にのみ影響し、異なる親を持つ要素には影響しません。詳細については、YUI Overlay documentationの「z-インデックスとスタッキングコンテキストの理解」を参照してください。

関連する問題