绝对位置，但相对于父级
绝对位置，但相对于父级
提问于 2012-05-08 02:41:55
我在另一个div中有两个div，我希望使用css将一个子div放在父div的右上角，另一个子div放在父div的底部。也就是说，我想对两个子div使用绝对定位，但将它们相对于父div而不是页面进行定位。我该怎么做呢？
示例html：
<div id="father">
<div id="son1"></div>
<div id="son2"></div>
</div>回答 4
Stack Overflow用户
回答已采纳
发布于 2012-05-08 02:44:12
#father {
position: relative;
}
#son1 {
position: absolute;
top: 0;
}
#son2 {
position: absolute;
bottom: 0;
}这是可行的，因为position: absolute的意思类似于“使用top，right，bottom，left来定位自己与拥有position: absolute或position: relative的最近祖先的关系。”
因此，我们使#father具有position: relative，子项具有position: absolute，然后使用top和bottom对子项进行定位。
Stack Overflow用户
发布于 2012-05-08 02:43:49
div#father {
position: relative;
}
div#son1 {
position: absolute;
/* put your coords here */
}
div#son2 {
position: absolute;
/* put your coords here */
}Stack Overflow用户
发布于 2017-04-05 15:11:28
以防有人想要将子div直接放在父目录下
#father {
position: relative;
}
#son1 {
position: absolute;
top: 100%;
}工作演示Codepen
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/10487292
复制相关文章
相似问题
腾讯云开发者
