股利另一個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; 
}