CSS：如何在右下角定位元素？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3956043/
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
CSS: how to position element in lower right?
提问by keruilin
I am trying to position the text element "Bet 5 days ago" in the lower right-hand corner. How can I accomplish this? And, more importantly, please explain so I can conquer CSS!
我试图在右下角放置文本元素“Bet 5 days ago”。我怎样才能做到这一点？而且，更重要的是，请解释一下，这样我就可以征服 CSS！
回答by Austin Hyde
Lets say your HTML looks something like this:
假设您的 HTML 如下所示：
<div class="box">
<!-- stuff -->
<p class="bet_time">Bet 5 days ago</p>
</div>
Then, with CSS, you can make that text appear in the bottom right like so:
然后，使用 CSS，您可以使该文本显示在右下角，如下所示：
.box {
position:relative;
}
.bet_time {
position:absolute;
bottom:0;
right:0;
}
The way this works is that absolutely positioned elements are always positioned with respect to the first relatively positioned parent element, or the window. Because we set the box's position to relative, .bet_timepositions its right edge to the right edge of .boxand its bottom edge to the bottom edge of .box
这种工作方式是绝对定位的元素总是相对于第一个相对定位的父元素或窗口定位。因为我们设置框的位置相对，.bet_time定位其右边缘的右边缘.box和底部边缘的底部边缘.box
回答by PleaseStand
Set the CSS position: relative;on the box. This causes all absolute positions of objects inside to be relative to the corners of that box. Then set the following CSS on the "Bet 5 days ago" line:
position: relative;在框上设置 CSS 。这会导致内部对象的所有绝对位置都相对于该框的角。然后在“Bet 5 days ago”行上设置以下 CSS：
position: absolute;
bottom: 0;
right: 0;
If you need to space the text farther away from the edge, you could change 0to 2pxor similar.
如果您需要将文本距边缘更远，您可以更改0为2px或类似。
