Html 嵌套的div内容未显示

我在一个页面上播放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> 

小提琴连杆

演示只有一个视频

更新：

我在页面上有其他元素，如果我使用position:absolute；它将标签/标题移出div包装器示例，这在我的实际页面上也会发生

我尝试在

hp video label

div容器中使用span，label，但它仍然会随着position:absolute移出，如果我没有提到它，那么文本就不会显示。我不确定原因是什么？

使用：

z指数：999；或者更高。。。css属性
如果没有显示
加：

用于显示框架顶部的按钮等。。。

---

可能会帮助您…

您好，请在hp视频标签上添加

位置：absolute

小提琴：

css

---

在标签中添加了

位置：绝对

，以及

文本对齐：居中

---

小提琴：

你在那里使用了错误的定位技术，

位置：绝对最适合此场景。。。因此，使子元素
位置：绝对和分配
位置：相对到子元素。诚然，您的CSS非常脏


您使用
margin
将元素定位为
absolute
，这不好，您需要
margin
说明何时需要将任何元素居中，或出于类似原因。如果使用
位置：绝对然后使用
顶部
、
右侧
、
底部
和
左侧
属性来正确设置元素。然后使用
margin
进行微调

使用
float
和
位置：绝对完全不需要的元素。因此，这种方法有些完全无效

您使用的是
opacity
，我确信您不希望文本也变得不透明，因此请改用
rgba
。因此，不透明度为
0.5
的
008F3D
等效
rgba
为
背景色：rgba（0,143,61,5）

最后，在
a
标记中嵌套
div
是无效的HTML



我该怎么做？

（添加播放按钮）


使用
a
标记包装子元素


我将整个图像和标签包裹在锚内
添加位置：绝对；对于这个班级，这个问题是上周发生的。。。我通过位置和z指数来修正它；谢谢，我在页面上有其他元素并更改了位置：将标签从包装中移出，并将其移动到页面顶部。。我对你的html做了一些修改，比如说，谢谢，我刚刚更新了我的问题，看来你有理由这么做。让我检查一下…我通过一些调整解决了它，使它在我的实际页面上工作。我使用了您的代码结构+1作为详细信息和示例。@KnowledgeSeek将其替换为我提供的标记，很高兴您修复了它：）
position:absolute;

.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;
}

.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;
}

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