我正在尝试实现水平多级下拉菜单.紧接着(垂直)菜单,我通过iframe嵌入了YouTube视频.如果我将鼠标悬停在Firefox中的某个主级别导航项上,则会在视频顶部显示正确的下拉菜单.
但是,在Chrome和IE9中,在菜单和iframe之间的小空间区域中只能看到下拉条的一小部分.其余部分似乎是iframe的背后.
问题似乎与YouTube视频有关,而不是 iframe.为了测试,我将iframe定位在另一个网站而不是视频,并且下拉菜单工作正常,即使在IE中也是如此.
z-index:-999 !important;
在iframe上放置了这个问题仍然会发生?是否有一些内嵌CSS,YouTube嵌入代码包含在某种程度上压倒一切?
当使用<object>and <embed>标签嵌入Flash对象时,会有一个名为的属性wmode.似乎大部分时间wmode="transparent"都与wmode="opaque"Flash实际上没有任何透明颜色相同,因此底部HTML元素将被显示.因此,opaque应该比transparent由于需要更少的透明处理更快,但大多数时候我看到嵌入的Flash对象transparent而不是opaque.
opaque 需要使Flash对象不会覆盖其他HTML元素(例如弹出额外子菜单的菜单项不会被Flash对象覆盖).
顺便说一句,有没有正式文件wmode的opaque,transparent和window?我只能找到描述它的博客,但不能找到正式的文档.谢谢.
我正在创建一个类似于uservoice小部件的小部件,除了我希望页面的内容在iFrame中,而不是通过javascript显示小部件.我怎么能有一个整页(宽度/高度100%)iFrame与固定在浏览器左侧的div,一个例子(使用javascript而不是css/html)在这里:http://uservoice.com/demo
我希望该小部件在页面上本地显示,并通过iFrame加载内容.
有任何想法吗?我不能让iFrame填满整个页面,并且还显示在顶部.我玩过Z-index而没有运气.代码示例:
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<style>
#widget {
left: 0px;
position: absolute;
top: 50%;
display: block;
z-index:100001;
width: 25px;
}
#content {
z-index:1;
}
</style>
</head>
<body>
<div id="widget">
widget
</div>
<iframe frameborder="0" id="content" src="http://www.google.com/" width="100%" height="100%"></iframe>
</body>
</html>
Run Code Online (Sandbox Code Playgroud)