html - 嵌套的 div 内容不显示

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> 

fiddle 链接 http://jsfiddle.net/2Aa2X/2/

Demo只有一个视频

更新:

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

我尝试在 hp-video-label div 容器中使用 span, label，但它仍然会随着 position:absolute 移出它，如果我不提及它，则文本不会显示。我不确定这是什么原因？

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