更新

Question

我正在页面上嵌入YouTube视频，它们显示在下拉菜单，灯箱等上面。我宁愿不使用旧的YouTube嵌入代码，但是愚蠢的iframe令人讨厌地将自己置于页面上的其他所有元素上。是否有可能让它学到它的位置？

Answer 1

最终更新

在iframe网址末尾添加?wmode=transparent或&wmode=transparent如果还有其他参数传递，则似乎可以解决所有浏览器的问题。

原始回答

使用z-index结合定位（相对或绝对）

在http://jsfiddle.net/gaby/BS4Ww/3/

上下载youtube视频（新代码）的示例

的更新 的

在div上添加了iframe以及我误解了下拉菜单

Answer 2

你可以在容器内浮动iframe和你想要的任何东西。

然后，在您想要的项目上，只需设置一个负的上边距。

Here's a jsfiddle表明我的意思。

您还可以对前面想要的项目使用绝对定位，但这通常会导致网站出现其他问题。

更新

您似乎正在尝试违反常规HTML流程。在HTML中首先出现的事情通常是“在”之下或之前发生的事情。

但是，您可以从常规的HTML呈现流中取出一个元素并将其置于绝对位置。

我updated the jsfiddle来说明这是如何完成的。请注意，绝对位置可能会将其他问题带入您的网站设计中。

Answer 3

尝试在框架上设置z-index。

z-index

Answer 4

您可以在标记内使用margin-top:12px;或其他内容。

Answer 5

如果你把iFrame放在一个div中，并在div上设置一个z-index，这应该可行。我一直在工作。

Answer 6

对于一个项目，我需要类似的东西。我打算显示iframe内容但不允许用户关注其链接。相反，我想将用户指向另一个网址。这是我的解决方案。在IE中工作对于为over元素设置一些背景颜色很重要。

 #over{
        position: absolute;
        top: 0px;
        left: 0px;
        height: 100%;
        width: 100%;
        background-color:white; /* for unknow reason is color important for IE*/
        opacity:0;
        filter:alpha(opacity=0);    
    }

    iframe{
        width: 100%;
        height: 550px;
    }

    <div>
        <div id="over" onclick="parent.location='....'"></div>
        <iframe src="...">You don't have iframe support, unfortunately</iframe>         
   </div>

可以在iframe前放置一些东西吗？

6 个答案:

更新