css - 将div定位到包含div的底部

nag*_*hun 112 css position

如何将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>
Run Code Online (Sandbox Code Playgroud)

此代码将文本"内部"放在页面底部.

Kar*_*arl 131

.outside {
    width: 200px;
    height: 200px;
    background-color: #EEE; /*to make it visible*/
}
Run Code Online (Sandbox Code Playgroud)

需要是

.outside {
    position: relative;
    width: 200px;
    height: 200px;
    background-color: #EEE; /*to make it visible*/
}
Run Code Online (Sandbox Code Playgroud)

绝对定位在DOM中查找最近的相对定位的父级,如果未定义父级,则它将使用该主体.

  • `absolute`搜索最近的`relative` parent.默认情况下,它是`document`的`body`.因此,如果没有父DOM对象(`.outside`)具有属于`relative`的属性,则`.inside`将转到body标签的底部. (37认同)
  • "*绝对定位寻找DOM中最近的相对定位的父级,如果没有定义它将使用正文.*"你刚才解释**对我来说很多!现在我真的开始理解CSS了.***谢谢!*** (6认同)

dsg*_*fin 71

分配position:relative.outside,然后分配position:absolute; bottom:0;给你.inside.

像这样:

.outside {
    position:relative;
}
.inside {
    position: absolute;
    bottom: 0;
}
Run Code Online (Sandbox Code Playgroud)


Exp*_*lls 20

添加position: relative.outside.(https://developer.mozilla.org/en-US/docs/CSS/position)

相对定位的元素仍然被认为是文档中正常的元素流.相比之下,绝对定位的元件从流动中取出,因此在放置其他元件时不占用空间.绝对定位的元素相对于最近定位的祖先定位.如果定位的祖先不存在,则使用初始容器.

"初始容器"将是<body>,但添加上面的.outside定位.