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;

，时间将从缩略图的底部和右侧始终定位10px。

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-time有效，但可能不太理想。

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