html - 将 div 放置在 html 中的 iframe 顶部

Question

我正在努力如何将 a放置在html 标记<div>之上。<iframe>

所以我有这个 iframe，里面有一个视频。我创建了一个<div>包含 vid 描述的 div，我希望将该 div 放在视频/iframe 的顶部。

我只是不确定如何在 CSS 上正确设置它。

我正在使用的播放器也是type="application/x-google-vlc-plugin"

...
<td>
    <div class="description"><h1>Title</h1></div>
    <iframe src="video.html" allowtransparency="yes"></iframe>
</td>
...

[编辑]

这是我的CSS

iframe { 
    width:480px; 
    height:300px;
    overflow:hidden; 
    border:0; 
    position:absolute; 
    z-index:-1; 
}

.description {
    position:absolute;
    z-index:999;
}

Answer 1

像这样给 CSS

iframe { 
    width:480px; 
    height:300px;
    overflow:hidden; 
    border:0; 
    position:relative; 

}

.description {
    position:absolute;
    z-index:999;
    width:480px; 
    height:300px
    top:0;
    left:0
}

Answer 2

.description {
height:300px;
width:400px;
position:absolute;
top:0px;
left:0px;
z-index:10;
border-style:solid;
border-width:1px;
border-color:black;
}

iframe {
height:300px;
width:400px;
position:absolute;
top:0px;
left:0px;
z-index:1;
border-style:solid;
border-width:1px;
border-color:black;
}

border-width当您将所有内容放置在您想要的位置时，只需更改为 0px。

Answer 3

我会在<td>then give that 中添加一个类position: relative。然后，我将绝对定位其内部.description和iframe内部。如果你能给我一个例子，iframe我会为你 JSFiddle