将一个带有图像的 div 放在另一个带有嵌入视频的 div 之上答案

【问题标题】：Place a div with an image on top of another div with an embeded video将一个带有图像的 div 放在另一个带有嵌入视频的 div 之上
【发布时间】：2012-06-15 14:10:58
【问题描述】：

我正在尝试制作一个 HTML 页面来循环播放视频的播放列表，其中覆盖了与某个标签相对应的 Twitter 消息。

我认为我可以将它用于网络环境，所以我尝试结合 HTML 和 CSS。

我训练使其工作的方法是嵌入一个宽度和高度为 100% 的 WMPlayer 对象，并在该层的顶部放置另一个具有背景的层和一些 PHP 代码来加载推文。

但它根本不起作用......不尝试使用图像，甚至尝试仅使用文本。我认为问题可能在于无法在视频顶部放置任何内容，或者当然是我的代码错误。

这里是：

html, body {
    height: 100%
}

.video{   
   width: 100%;
   height: 100%;;
   position: relative;
    background: #0f0;
}
.tweets {    
    width:50%;
    height:350px;
    position: absolute;
    top: 0; left: 0;
    background: #f00;
    z-index:100
}

还有 HTML：

<div class="video">
            <OBJECT id="VIDEO" width="100%" height="100%" 
                CLASSID="CLSID:6BF52A52-394A-11d3-B153-00C04F79FAA6"
                type="application/x-oleobject">
                    <PARAM NAME="URL" VALUE="http://www.falange.es/videos/video.mp4">
                <PARAM NAME="SendPlayStateChangeEvents" VALUE="True">
                <PARAM NAME="AutoStart" VALUE="True">
                <PARAM name="uiMode" value="none">
                <PARAM name="PlayCount" value="9999">
                <PARAM name="WMode" value="opaque">
                <embed type="application/x-mplayer2" pluginspage="http://www.microsoft.com/Windows/MediaPlayer/" 
                name="mediaplayer1" autostart="true" width="100%" height="100%" transparentstart="1" SHOWSTATUSBAR="1" 
                    loop="0" controller="true" src="http://www.falange.es/videos/video.mp4" stretchToFit="true" ></embed>
            </OBJECT>       
            <div class="tweets">
                Tweets here.
            </div>          
        </div>

我做错了什么？

非常感谢您。

【问题讨论】：

据我所知 float:top 不是有效的 css 并且不执行任何操作。你需要的是 z-index
你是对的。但是不管有没有“float:top”，它都不会做任何事情。我想我只是绝望了，我尝试了几乎所有关于定位的事情......谢谢;）

标签： css html video-embedding

【解决方案1】：

你必须给你的<body> 100% 的高度，而不是<div> 将延伸到它 - http://jsfiddle.net/z5kGQ/

html, body {
    height: 100%;
}

.video {
   width: 100%;
   height: 100%;
   position: relative;
   background: beige;
}

.tweets {
    width:100%;
    min-height:150px;
    position: absolute;
    top: 0;
    background: orange;
}

【讨论】：

它也有效。我发现我的问题是 VLC 插件。在 IE 和 WMPlayer Plugin 上它可以工作，虽然视频 - 不是视频对象 - 它总是在顶部。非常感谢。

【解决方案2】：

尝试将 z-index:100 例如放在推文 div 上

.tweets {
    z-index:100;
    width:100%;
    min-height:350px;
    position: absolute;
    background: url(img.png) top left no-repeat;
}

从您的对象标签中删除样式标签，如果您可以提供一个带有工作视频和示例文本的 jsfiddle 以覆盖在顶部，那就太好了。我有一种感觉，当涉及到覆盖时，对象标签将很难处理，但我不能 100% 确定，直到我可以测试它

编辑 - 尝试在对象标签参数中设置 wmode=transparent

<PARAM name="WMode" value="transparent">

【讨论】：

作为其他示例，也可以在带有 WMPlayer 插件的 IE 上工作，但无法覆盖视频。它覆盖视频层，但不覆盖视频本身。