z-index confusion in IE
I have a line of floated divs which reveal a popup when hovered over. The trouble is the popup appear under the following divs and I can't work out a way to use z-index to eliminate this problem... nothing seems to work.
EDIT: With help i've fixed the problem but not in IE7 or below.
Any one any ideas??
HTML
<div>
<div>
<img src="/bc.jpg" width="54" height="54" id="bc-icon" alt="test1" />
<span><strong>test1</strong><br />dfgsertsrytwsertyrtyrsty</span>
</div>
<div>
<img src="/bb.jpg" width="54" height="54" id="bb-icon" alt="test2" />
<span><strong>test2</strong><br />dsfgsdfgsdfgsdfgsdfgsdfgsdfg</span>
</div>
<div>
<img src="/rd.jpg" width="54" height="54" id="rd-icon" alt="test3" />
<span><strong>test3</strong><br />dfgdfgdsfgsdfgsdfgsdfgsdfgsdfg</span>
</div>
<div>
<img src="/bl.jpg" width="54" height="54" id="bl-icon" alt="test4" />
<span><strong>test4</strong><br />dsfgsdfgsdfgsdfgsdfgsdfg</span>
</div>
</div>
CSS
div {clear:both; padding:0 0 8px 0; border:none; width:576px;}
div div { float:left; margin: 0 8px 0 0; padding:0; width:56px; clear:none; overflow:visible; position:relative; background-color:#B22222;}
div div img { padding:1px; cursor:pointer; display:block;}
div div span { background-color:#89A7BA; position:absolute; bottom:26px; left:-19px; padding:5px 10px; font-family:'MS Sans Serif',Geneva,sans-serif; border:2px solid #FFF; font-size:12px; display:none;}
div div span img { position:absolute; bottom:-18px; left:34px;}
div div span strong {font-size:14px; text-transform:uppercase;}
and jquery to create the popups...
$.fn.hoverAnimation = function() {
return $(this).each(function() {
return $(this).hover(function() {
$(this).find("span").slideDown(100);
$(this).css("background-color", "#000");
}, function() {
$(this).find("span").slideUp(100);
$(this).css("background-color", "#B22222");
});
});
}
$("div > div").hoverAnimation();
plus I've set it up in jsf开发者_如何学Ciddle here
You are quite right - IE7 won't run this correctly. The problem is that IE7 works out z-indexes based on the z-indexes of containing elements which need to be explicitly set. Every time you position
something it will affect it's z-index. This puts you in a slight predicament. You would normally set the parent element to position:relative; z-index:1
to reset the z-indexing but this won't work in your case as you need to set it on the first div and all the child divs (since you use position: relative
on these). When you set it on the child divs they begin a new z-index stack which leaves you in the same predicament.
But I have a potential solution. Only set position: relative
on the child divs when the jQuery is firing. See this example
solution to your problem any greater no should be fine
span {z-index:200}
working copy here
http://jsfiddle.net/dfgsH/
精彩评论