css - 将 div 定位到包含 div 的底部
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15358646/
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 - position div to bottom of containing div
提问by nagy.zsolt.hun
How can i position a div to the bottom of the containing div?
如何将 div 定位到包含 div 的底部？
<style>
.outside {
width: 200px;
height: 200px;
background-color: #EEE; /*to make it visible*/
}
.inside {
position: absolute;
bottom: 2px;
}
</style>
<div class="outside">
<div class="inside">inside</div>
</div>
This code puts the text "inside" to the bottom of the page.
此代码将文本“内部”置于页面底部。
回答by Karl
.outside {
width: 200px;
height: 200px;
background-color: #EEE; /*to make it visible*/
}
Needs to be
需要是
.outside {
position: relative;
width: 200px;
height: 200px;
background-color: #EEE; /*to make it visible*/
}
Absolute positioning looks for the nearest relatively positioned parent within the DOM, if one isn't defined it will use the body.
绝对定位在 DOM 中寻找最近的相对定位的父级，如果没有定义，它将使用主体。
回答by dsgriffin
Assign position:relativeto .outside, and then position:absolute; bottom:0;to your .inside.
分配position:relative给.outside，然后分配position:absolute; bottom:0;给您的.inside.
Like so:
像这样：
.outside {
position:relative;
}
.inside {
position: absolute;
bottom: 0;
}
回答by Explosion Pills
Add position: relativeto .outside. (https://developer.mozilla.org/en-US/docs/CSS/position)
添加position: relative到.outside. ( https://developer.mozilla.org/en-US/docs/CSS/position)
Elements that are positioned relatively are still considered to be in the normal flow of elements in the document. In contrast, an element that is positioned absolutely is taken out of the flow and thus takes up no space when placing other elements. The absolutely positioned element is positioned relative to nearest positioned ancestor. If a positioned ancestor doesn't exist, the initial container is used.
相对定位的元素仍然被认为是在文档中元素的正常流中。相反，绝对定位的元素从流中取出，因此在放置其他元素时不占用空间。绝对定位元素相对于最近定位的祖先定位。如果定位的祖先不存在，则使用初始容器。
The "initial container" would be <body>, but adding the above makes .outsidepositioned.
“初始容器”将是<body>，但添加上述使.outside定位。
