一、需求
“求职入口” 下面的浮窗位置在其正下方，并且浏览器分辨的改变（拖动浏览器），位置依旧在最下方
二、实现
<div class="btn_box">
<div class="btn_link id="js-apply">求职入口
<div class="from-icon-ma">
<img src="wxcode.png?ver=20241122001" class="wx">
</div>
</div>
<a href="javascript:void(0);" class="onTraial">申请试用</a>
</div>.btn_box {
float: right;
height: 65px;
display: flex;
align-items: center;
}#js-apply {
cursor: pointer;
position: relative;
}#js-apply .from-icon-ma {
width: 170px;
height: 170px;
position: absolute;
top: 47px;
left: 50%;
transform: translateX(-50%);
display: none;
padding: 20px;
border: 1px solid #ebeef5;
border-radius: 10px;
background-color: #FFFFFF;
z-index: 2000;
box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.2);
}关键点：
1、父级#js-apply，设置了position: relative;
position: relative的作用：
✅ 为子元素.from-icon-ma的absolute绝对定位的基准点- 子元素
.from-icon-ma设置了position: absolute;，这意味着它的定位是相对于最近的非static（默认定位）的祖先元素计算的。 如果父级#js-apply没有
position: relative（或fixed/absolute/sticky），那么.from-icon-ma的定位会一直向上查找，可能相对于<body>或某个更高层级的容器，导致定位错误。position: relative的作用就是让子元素的top/left/right/bottom基于这个父级计算，而不是相对于整个页面
- 子元素
✅ 确保
left: 50%和transform: translateX(-50%)的计算基于父级，而不是整个页面transform: translateX(-50%)是 CSS 中用于水平移动元素的变换属性，它能让元素向左移动自身宽度的一半。这个技巧在居中定位、响应式布局等方面非常有用。left: 50%; /* 移动到父容器中间 */- left: 50%;移动到父容器中间，左边缘会到父容器中间的位置，如下图
- 再使用
transform: translateX(-50%)让元素向左移动自身宽度的一半，这样就到正下方了 
✅ 保持父级元素仍占据正常文档流，不影响其他布局
保持按钮原有布局不受影响
position: relative不会使元素脱离文档流（不像absolute或fixed），所以#js-ai-apply仍然占据原来的空间，不影响其他元素的布局。如果去掉
position: relative，子元素的absolute定位可能会破坏整体布局，导致按钮位置异常。
三、relative + absolute 是经典组合
例如：导航菜单、下拉框、Tooltip 提示框等，都需要 relative 父级 + absolute 子级。