html - 嵌套的div内容未显示

我正在一个页面上播放youtube视频，该页面的缩略图来自youtube，点击它，我会显示一个透明的播放图像按钮。。在图像的底部，我想显示视频的标题，如最新视频，特色视频等。。
但是由于某些原因，label 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 wrapper示例http://jsfiddle.net/2Aa2X/6/在我的实际页面上也会发生同样的情况。。
我试过在div容器中使用span，label，但它仍然会随着position:absolute移出容器，如果我没有提到它，则不会显示文本。我不确定的原因是什么？

最佳答案

你在那里使用了错误的定位技术，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%;
}

关于html - 嵌套的div内容未显示，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/21522480/