如何将Font Awesome图标定位到<section>父元素右上角？
2026-5-29
解决Font Awesome图标相对右上角定位的问题
这个问题的核心是绝对定位的参考对象搞混啦！当你给元素设置position:absolute时，它会去找最近的、设置了position: relative/absolute/fixed/sticky的父元素作为定位基准。你的
position:static（浏览器默认值），所以图标就会相对于整个页面（视口）来定位了。修复步骤：
- 给父元素
添加 position:relative
这一步是关键，让它成为内部绝对定位元素的参考容器。 - 调整图标的容器样式，让多个图标能并排显示
可以给.top_right设置position:absolute并定位到右上角，里面的图标自然会并排（因为是行内元素），也可以用flex布局来控制间距。
下面是修复后的完整代码：
<link href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.1/css/bulma.css" rel="stylesheet" /> <script defer src="https://use.fontawesome.com/releases/v5.0.7/js/all.js"></script> <div class="columns"> <div class="column is-three-fifths is-offset-one-fifth"> <section class="section" style="border:1px solid black;background-color:yellow;position:relative;"> <div class="top_right" style="position:absolute;top:5px;right:5px;"> <i class="fas fa-cog mr-2"></i> <i class="fas fa-user"></i> <i class="fas fa-bell ml-2"></i> </div> </section> </div> </div>
细节说明：
- 给
加 position:relative后，内部的绝对定位元素就会以它为基准，而不是整个页面了。 - 把绝对定位设置在
.top_right容器上，而不是每个图标上，这样多个图标可以自然并排，后续添加图标只需要往容器里加就行，不用重复设置定位样式。 - 用Bulma的
mr-2/ml-2类给图标之间加间距，让布局更美观，你也可以自己写CSS设置margin来调整。
这样修改后，所有图标都会乖乖待在
内容的提问来源于stack exchange，提问作者pileup
相关产品推荐
相关产品推荐
