CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
John Smith
John Smith

Reputation: 2813

Div on top of another div

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:

http://i.imgur.com/T1dXnhP.png

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!

Upvotes: 2

Views: 10804

Answers (4)

Martin Turjak
Martin Turjak

Reputation: 21234

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

Upvotes: 5

StephenWidom
StephenWidom

Reputation: 132

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

Upvotes: 2

Senjai
Senjai

Reputation: 1816

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;
}

Upvotes: 2

Johan Snitt
Johan Snitt

Reputation: 101

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

Adding that to your .thumbnail-time works but it might not be ideal.

Upvotes: 3

Related Questions