题
我使用一个小的DIV遇到问题,该DIV应该在使用JQuery Cycle插件切换的图片上“悬停”。这些图片为950px宽,在图片顶部的右侧,一个小盒子应该带有最新消息。
问题是在IE中处于合理性模式。盒子似乎将其Z索引放松,最终出现在图片后面。它在IE8,Opera,Chrome和Firefox中起作用。
我尝试删除2张图片,因此只有1张图片显示,然后出于某种原因在CompainityMode中起作用。我试图在IMG标签之间删除空格,但没有运气,保证金: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您需要指定,例如,顶部:0;左:0如果您要使用位置:绝对。否则它通常最终到达站点。在IE7方面没有意义的另一件事。
解决方案
将您的#NewSwrapper作为比#NewSlisting更高的索引
那应该起作用
另外,我还没有看过周期的代码,但我假设它使用的z索引比12更高。 z-index
> 1000,您想成为屏幕上最前方的东西。
我只是很难解决类似的问题。 (CSS下拉下的横幅下方)我使用CSS最终修复了它,更改了父母 div
将整个导航缠绕到 position:absolute
而且很高 z-index
但是我测试了 这个 而且效果很好。
不隶属于 StackOverflow