Question

我正在努力将<div>置于视频<object>之上。

蓝色边框是我的<iframe>。视频背后是我的<div class="title">some text</div>我想要在视频的顶部并将其放在右下方。

enter image description here

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>

这是我owlvid.html

中的对象

<OBJECT classid="clsid:9BE31822-FDAD-461B-AD51-BE1D1C159921"
   codebase="http://downloads.videolan.org/pub/videolan/vlc/latest/win32/axvlc.cab"
    width="480" height="300" id="vlc" events="True">

   <param name="Src" value="owl-vid-path-source" />
   <param name="ShowDisplay" value="True" />
   <param name="AutoLoop" value="False" />
   <param name="AutoPlay" value="True" />
   <param name="wmode" value="transparent" />

   <embed id="vlcEmb"  type="application/x-google-vlc-plugin" version="VideoLAN.VLCPlugin.2" autoplay="yes" loop="no" width="480" height="300"
     target="owl-vid-path-source" ></embed>

</OBJECT>

Answer 1

试试这个：

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

将div放在HTML CSS </object>中的视频<object>之上

1 个答案: