twitter-bootstrap Div 在另一个 div 之上
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16502510/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Div on top of another div
提问by John Smith
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:
我试图放在一起基本上是用缩略图右下角的时间戳重新制作 YouTube 缩略图，如下所示：
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/
这是 JSFiddle：http: //jsfiddle.net/MgcDU/4162/
HTML:
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:
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!
请帮忙！
回答by Martin Turjak
You could try adding something like this to your .thumbnail-timeand moving it inside the .thumbnail-container:
您可以尝试将这样的内容添加到您的.thumbnail-time并将其移动到.thumbnail-container：
display:inline-block;
position:relative;
bottom:18px;
right:52px;
if you now assign a width to the container (say 220px) and position:relative;, you can now add this to your .thumbnail-time:
如果您现在为容器分配宽度（例如 220 像素）position:relative;，您现在可以将其添加到您的.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.
并且时间将始终位于距离缩略图底部和右侧 10px 的位置。
回答by StephenWidom
You need to use
你需要使用
position:absolute;
Also a good idea to add
添加也是一个好主意
z-index:1000;
on the div containing the time.
在包含时间的 div 上。
Like this: http://jsfiddle.net/MgcDU/4181/
像这样：http: //jsfiddle.net/MgcDU/4181/
http://css-tricks.com/absolute-positioning-inside-relative-positioning/
http://css-tricks.com/absolute-positioning-inside-relative-positioning/
回答by Johan Snitt
position: relative;
left: 180px;
bottom: 30px;
Adding that to your .thumbnail-time works but it might not be ideal.
将它添加到您的 .thumbnail-time 中是可行的，但它可能并不理想。
回答by Senjai
Check this out: http://jsfiddle.net/MgcDU/4172/
看看这个：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;
}
