Question

我正在一个页面上播放youtube视频，其中包含来自youtube的缩略图，然后点击我显示透明的播放图像按钮..在图像的底部我想显示视频的标题，如最新视频，精选视频等。

但由于某种原因，标签div容器未显示其中的文字，而它显示背景颜色等...

<div class="profile-icon"> <a href="#">
        <img alt="Latest Video" src="http://img.youtube.com/vi/GWGTPvOISSs/hqdefault.jpg" class="hp-video-thumbnail" title="Latest Video" >
        <div class="hp-playVideo">
             <img src="../../../images/something.png" alt="Play" class="imgPlayVideo" >
        </div>
        <div class="hp-video-label">Latest Video</div>
    </a>
</div>

小提琴链接http://jsfiddle.net/2Aa2X/2/

演示只有一个视频

更新：

我在页面上有其他元素，如果我使用position：absolute;它将标签/标题移出div div包装器示例http://jsfiddle.net/2Aa2X/6/同样发生在我的实际页面上..

我尝试在hp-video-label div容器中使用span，label但它仍然移出它的位置：绝对，如果我没有提及它，则文本不会显示。我不明白的原因是什么？

Answer 1

您在那里使用了错误的定位技术，position: absolute;最适合这种情况......所以制作子元素position: absolute;并将position: relative;分配给子元素。说实话，你的CSS非常脏。

您使用的margin元素位置absolute并不好，您需要margin说当您需要居中任何元素时，或出于某种类似的原因。如果您使用position: absolute;而非使用top，right，bottom和left属性来正确设置元素。比使用margin进行轻推。
您使用的float元素与position: absolute;元素完全不同。所以这种方法完全无效。
您使用的是opacity，并且我确定您不希望自己的文字变得不透明，因此请改用rgba。因此#008F3D的不透明度为0.5等效rgba为background-color: rgba(0, 143, 61, .5);
最后但并非最不重要的是，在div代码中嵌套a 无效HTML 。

我该怎么做？

Demo

Demo 2 （添加了播放按钮）

.wrap {
    position: relative;
    margin: 20px;
    border: 3px solid #eee;
    display: inline-block;
}

.wrap img {
    display: block;
}

.wrap span {
    position: absolute;
    background: rgba(255,255,255,.5);
    bottom: 0;
    padding: 10px;
    width: 180px;
    text-align: center;
}

使用a标记

包装子元素

Demo 3

.wrap a {
    display: block;
    height: 100%;
    width: 100%;
}

Answer 2

使用：

z-index：999;或更高... css属性
如果没有显示
添加：

position:absolute;

用于显示按钮顶部框架等...
也许帮助你...

Answer 3

您好，请在您的hp-video-label上添加position:absolute ..

小提琴：http://jsfiddle.net/nikhilvkd/2Aa2X/3/

CSS

.hp-video-label {
    background-color: rgba(0,143,61,0.5);
    color: #FFFFFF;
    font-size: 16px;
    height: 30px;
    opacity: 1;
    position: absolute;
    top: 98px;
    width:195px;
    text-align:center;
}

Answer 4

在您的标签上添加了position:absolute，以及text-align:center

小提琴：http://jsfiddle.net/2Aa2X/4/

嵌套的div内容没有显示出来

4 个答案:

我该怎么做？