私のサイトのヘッダーには、クリックするとポップアップが表示されます。 、(ボタンのすぐ下)顧客がサイトを検索できるようにします。これを行うには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
何かアドバイスをいただければ幸いです、 多くの感謝を!