css 二维码始终显示在按钮的正下方，并且根据不同的屏幕分辨率自动调整位置

news2025/11/4 21:13:46

一、需求

“求职入口” 下面的浮窗位置在其正下方，并且浏览器分辨的改变（拖动浏览器），位置依旧在最下方

二、实现

<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 定位可能会破坏整体布局，导致按钮位置异常。