股利另一个DIV的顶部

Question

我试图拼凑在缩略图的右下角基本上改造YouTube的缩略图，时间戳，就像这样：

然而，我似乎无法弄清楚如何将时间戳放在图像的顶部，然后正确定位。

这里的的jsfiddle：http://jsfiddle.net/MgcDU/4162/

HTML：

<div class="container"> 
    <div class="small-video-section"> 
    <div class="thumbnail-container"> 
     <img src="http://i2.ytimg.com/vi/yKWoPlL2B8I/mqdefault.jpg" width="220" /> 
    </div> 
    <div class="thumbnail-time"> 
     5:42 
    </div> 
    </div> 
</div> 

CSS：

.small-video-section { 
    height: 134px; 
} 

.thumbnail-container { 
    margin-top: 15px; 
    margin-right: 20px; 
} 

.thumbnail-last { 
    margin-top: 15px; 
} 

.thumbnail-time { 
    display: inline; 
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; 
    font-size: 12px; 
    color: #ffffff; 
    background-color: #000000; 
    opacity: 0.8; 
    padding: 2px 4px 2px 4px; 
} 

请帮帮忙！

Answer 1

你可以尝试添加这样的事情你.thumbnail-time和移动它的.thumbnail-container内：

display:inline-block; 
    position:relative; 
    bottom:18px; 
    right:52px; 

jsfiddle

，如果你现在的宽度分配到容器（比如220px）和position:relative;，你现在可以添加到您的.thumbnail-time：

display:inline-block; 
    position:absolute; 
    bottom:10px; 
    right:10px; 

并且时间从缩略图的底部和右侧始终位于10px。

jsfiddle

Answer 2

您需要使用

position:absolute; 

也是一个好主意就包含时间的股利增加

z-index:1000; 

。

像这样：http://jsfiddle.net/MgcDU/4181/

http://css-tricks.com/absolute-positioning-inside-relative-positioning/

https://developer.mozilla.org/en-US/docs/Web/CSS/z-index?redirectlocale=en-US&redirectslug=CSS%2Fz-index

Answer 3

position: relative; 
left: 180px; 
bottom: 30px; 

并称，您.thumbnail时间工程，但它可能不是很理想。

Answer 4

检查了这一点：http://jsfiddle.net/MgcDU/4172/

我不是专家，但它的工作原理。如果你找到一个更好的解决办法评论，让我知道这样我就可以学习以及:)

.small-video-section { 
    height: 134px; 
} 
.thumbnail-container { 
    margin-top: 15px; 
    margin-right: 20px; 
    position: absolute; 
    display:inline-block; 
} 
.thumbnail-last { 
    margin-top: 15px; 
} 
.thumbnail-time { 
    font-family:'Helvetica Neue', Helvetica, Arial, sans-serif; 
    font-size: 12px; 
    margin-top:20px; 
    position:absolute; 
    z-index:1; 
    color: #ffffff; 
    background-color: #000000; 
    opacity: 0.8; 
    padding: 2px 4px 2px 4px; 
    display:inline; 
}