嵌套的 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> 

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

演示只有一个视频

更新：

我在页面上有其他元素，如果我使用 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%;
}

Answer 2

您好，请在您的 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 3

使用：

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

position:absolute;

用于显示框架顶部的按钮等...
或许能帮到你……

Answer 4

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

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