Question

我正在努力将<div>置于<iframe> html标记之上。

所以我有这个带有视频的iframe。我创建了一个<div>，其中包含vid的说明，我希望将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

.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 2

给这样的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 3

我要向<td>添加一个课程，然后提供position: relative。然后，我绝对将.description和iframe放在其中。如果你能给我一个例子iframe我将为你提供JSFiddle

在html中将if放在iframe的顶部

3 个答案: