在视频顶部放置一个div<；对象>；在HTML CSS中_Html_Css

在视频顶部放置一个div<；对象>；在HTML CSS中

html css

在视频顶部放置一个div<；对象>；在HTML CSS中,html,css,Html,Css,我正在努力将放在视频上蓝色边框是我的。视频后面是我的一些文本，我想放在视频顶部，并将其放置在右下角 CSS和HTML <style type="text/css"> .title { height:50px; width:150px; border:1px solid #000; position:absolute; z-index:10; background-color:pink; top:260px;left:0;

我正在努力将

放在视频

上

蓝色边框是我的

。视频后面是我的

一些文本

，我想放在视频顶部，并将其放置在右下角

CSS和HTML

<style type="text/css">
.title {
    height:50px;
    width:150px; 
    border:1px solid #000;
    position:absolute;
    z-index:10;
    background-color:pink;
    top:260px;left:0;
}
iframe {
    width:490px;
    height:400px;
    position:absolute;
    z-index:1;
    border:2px solid blue;
}
</style>
<body>
<div id="wrap" style="position:relative;">
    <div class="title">
        <h1>some text</h1>
    </div>

<iframe src="owlvid.html"></iframe>
</div>
</body>

试试这个：

<style type="text/css">
#wrap {
    position: absolute;
    width: 492px;
}
.title {
    background-color: #FFC0CB;
    border: 1px solid #000000;
    height: 50px;
    width: 100%;
}
.title h1 {
    float: right;
    line-height: 1;
    margin-right: 10px;
    margin-top: 0;
    position: relative;
    top: 25%;
}
iframe {
    border: 2px solid #0000FF;
    height: 400px;
    padding-top: 50px;
    position: absolute;
    top: 0;
    width: 490px;
}
</style>
<body>
  <div id="wrap">
    <div class="title">
      <h1>some text</h1>
    </div>
    <iframe src="owlvid.html"></iframe>
  </div>
</body>


#包裹{
位置：绝对位置；
宽度：492px；
}
.头衔{
背景色：#FFC0CB；
边框：1px实心#000000；
高度：50px；
宽度：100%；
}
.标题h1{
浮动：对；
线高：1；
右边距：10px；
边际上限：0；
位置：相对位置；
最高：25%；
}
iframe{
边框：2px实心#0000FF；
高度：400px；
填充顶部：50px；
位置：绝对位置；
排名：0；
宽度：490px；
}
一些文本

它似乎在这里工作。。。试了很多次，但对我还是不起作用。我真的不知道你的工作原理-/我注意到iframe src是针对youtube视频的。但我需要针对一个包含该页面的HTML页面，我只是以它为例。如果你提供你正在使用的例子，我会看一看，并找出它！我刚才回答了一个类似的问题，看这里。。。我试过了，但还是不起作用。你知道为什么吗？div仍在视频

@user1933824后面。请查看我的最新版本，并告诉我是否与您要查找的内容更接近。可能添加

z-index:50到我们想要在视频上方的元素就足够了。
<style type="text/css">
#wrap {
    position: absolute;
    width: 492px;
}
.title {
    background-color: #FFC0CB;
    border: 1px solid #000000;
    height: 50px;
    width: 100%;
}
.title h1 {
    float: right;
    line-height: 1;
    margin-right: 10px;
    margin-top: 0;
    position: relative;
    top: 25%;
}
iframe {
    border: 2px solid #0000FF;
    height: 400px;
    padding-top: 50px;
    position: absolute;
    top: 0;
    width: 490px;
}
</style>
<body>
  <div id="wrap">
    <div class="title">
      <h1>some text</h1>
    </div>
    <iframe src="owlvid.html"></iframe>
  </div>
</body>