我在另一个div中有两个div,我希望使用css将一个子div放在父div的右上角,另一个子div放在父div的底部。也就是说,我想对两个子div使用绝对定位,但将它们相对于父div而不是页面进行定位。我该怎么做呢?
示例html:
<div id="father">
<div id="son1"></div>
<div id="son2"></div>
</div>
发布于 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
对子项进行定位。
发布于 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 */
}
发布于 2017-04-05 15:11:28
以防有人想要将子div直接放在父目录下
#father {
position: relative;
}
#son1 {
position: absolute;
top: 100%;
}
工作演示Codepen
https://stackoverflow.com/questions/10487292
复制相似问题