如何将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中查找最近的相对定位的父级,如果未定义父级,则它将使用该主体.
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定位.