Html 绝对位置，但相对于父对象

我在另一个div中有两个div，我想使用css将一个子div放置在父div的右上角，将另一个子div放置在父div的底部。也就是说，我想对两个子div使用绝对定位，但是相对于父div而不是页面定位它们。我该怎么做

示例html：

<div id="father">
   <div id="son1"></div>
   <div id="son2"></div>
</div>

div#父亲{
位置：相对位置；
}
第一分区{
位置：绝对位置；
/*把你的坐标放在这里*/
}
第二分区{
位置：绝对位置；
/*把你的坐标放在这里*/
}

这是因为

position:absolute

的意思是“使用

top

，

right

，

bottom

，

left

相对于最近的祖先来定位自己，而最近的祖先拥有

position:absolute

或

position:relative

”

---

因此，我们让父亲拥有相对的位置，孩子拥有绝对的位置，然后使用顶部和底部来定位孩子。

如果你没有给父母任何位置，那么默认情况下需要静态的位置。如果您想了解这种差异，请参考此示例

示例1:：

在这里父类并没有位置，所以元素是根据主体放置的

示例2:：

---

在本例中，父项具有相对位置，因此元素被绝对定位在相对父项内。

如果有人想将子div直接定位在父项下

#father {
   position: relative;
}

#son1 {
   position: absolute;
   top: 100%;
}

---

工作演示

您希望son1位于父亲的右上角，但son2应位于底部的什么位置？左下角、右下角或中心？在这种情况下，需要设置相对于父元素的位置：和相对于子元素的位置：绝对。在第一个子元素上，应该将top:0和right:0放置在父元素的右上角。在第二个子元素上，应该将bottom:0放置在父元素的底部。这里有一篇很好的文章详细解释了相对定位和绝对定位。为什么需要

#father{position:relative；}

？需要为他里面的人更改“位置规则”。@mathguy54因为规范说绝对定位的元素相对于第一个定位的父元素定位，这意味着任何父母的位置值都不是静态的。那么这种情况如何：父亲是相对的，其身高是100%，如何将儿子和儿子的位置分别定为父亲身高的20%和70%？@BruceSun，如果你没有#mainall{height:150px}。。。？我的意思是，如果mainall具有动态高度，那么您的浮动元素将相对于加载页面（和css）时父元素的位置。如果您想在页面加载后更新，请使用javascript-clientX和clientY是一个很好的开始，如果您需要调整父对象和子对象的大小，该怎么办？

   #mainall
{

    background-color:red;
    height:150px;
    overflow:scroll
}

#mainall
{
    position:relative;
    background-color:red;
    height:150px;
    overflow:scroll
}

#father {
   position: relative;
}

#son1 {
   position: absolute;
   top: 100%;
}