html - 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

如果您现在为容器分配宽度(例如 220 像素)和 position:relative;，您现在可以将其添加到您的 .thumbnail-time:

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

并且时间将始终位于距缩略图底部和右侧 10 像素的位置。

jsfiddle