Div на вершине другой 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; 

и время будет располагаться всегда на расстоянии 10 пикселей от нижней и правой стороны эскиза.

jsfiddle

Answer 2

Вы должны использовать

position:absolute; 

Также хорошая идея, чтобы добавить

z-index:1000; 

на DIV, содержащего время.

Как это: 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; 
}