Div on top of another div - html

Question

What I'm trying to put together is basically remaking the YouTube thumbnail with the timestamp at the bottom right of the thumbnail image, like this:
However, I can't seem to figure out how to make the timestamp go on top of the image and then position it properly.
Here's the 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;
}
Please help!

Answer 1

You could try adding something like this to your .thumbnail-time and moving it inside the .thumbnail-container:
display:inline-block;
position:relative;
bottom:18px;
right:52px;
jsfiddle
if you now assign a width to the container (say 220px) and position:relative;, you can now add this to your .thumbnail-time:
display:inline-block;
position:absolute;
bottom:10px;
right:10px;
and the time will be positioned always 10px from bottom and right side of the thumbnail.
jsfiddle

Answer 2

position: relative;
left: 180px;
bottom: 30px;
Adding that to your .thumbnail-time works but it might not be ideal.

Answer 3

Check this out: http://jsfiddle.net/MgcDU/4172/
I'm no expert but it works. If you find a better solution comment and let me know so I can learn as well :)
.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;
}

Answer 4

You need to use
position:absolute;
Also a good idea to add
z-index:1000;
on the div containing the time.
Like this: 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