小编典典

绝对位置但相对于父级

all

我在另一个 div 中有两个 div,我想使用 css 将一个子 div 放置在父 div 的右上角,将另一个子 div 放置在父 div
的底部。即,我想对两个子 div 使用绝对定位,但相对于父 div 而不是页面定位它们。我怎样才能做到这一点?

示例 html:

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

阅读 106

收藏
2022-03-06

共1个答案

小编典典

#father {
   position: relative;
}

#son1 {
   position: absolute;
   top: 0;
}

#son2 {
   position: absolute;
   bottom: 0;
}

之所以可行,是因为position: absolute它的意思是“使用top, right,
bottom,left将自己定位于与拥有position: absolute或的最近祖先的关系position: relative”。

所以我们 make #fatherhave position: relative,而孩子们 have position: absolute,然后使用topandbottom来定位孩子们。

2022-03-06