绝对位置但相对于父级
P粉395056196
P粉395056196 2023-10-11 12:04:14
0
2
670

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

示例 html:

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


P粉395056196
P粉395056196

全部回复(2)
P粉509383150

雷雷

P粉567281015
#father {
   position: relative;
}
    
#son1 {
   position: absolute;
   top: 0;
}
  
#son2 {
   position: absolute;
   bottom: 0;
}

这是有效的,因为position:absolute意味着“使用toprightbottomleft 将自己定位到与具有 position:absoluteposition:relative 的最近祖先相关的位置。”

所以我们让#fatherposition:relative,孩子们有position:absolute,然后使用top code> 和 bottom 来定位子项。

热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责声明 Sitemap
PHP中文网:公益在线PHP培训,帮助PHP学习者快速成长!