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

一、需求

"求职入口" 下面的浮窗位置在其正下方,并且浏览器分辨的改变(拖动浏览器),位置依旧在最下方

二、实现

html 复制代码
<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>
html 复制代码
.btn_box {
    float: right;
    height: 65px;
    display: flex;
    align-items: center;
}
html 复制代码
#js-apply {
    cursor: pointer;
    position: relative;
}
html 复制代码
#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 不会使元素脱离文档流 (不像 absolutefixed),所以 #js-ai-apply 仍然占据原来的空间,不影响其他元素的布局。

    • 如果去掉 position: relative,子元素的 absolute 定位可能会破坏整体布局,导致按钮位置异常。

三、relative + absolute 是经典组合

例如:导航菜单、下拉框、Tooltip 提示框等,都需要 relative 父级 + absolute 子级。

相关推荐
NicolasCage5 分钟前
react-typescript学习笔记
javascript·react.js
火车叼位6 分钟前
GSAP 动画开发者的终极利器:像素化风格 API 速查表
前端
JohnYan7 分钟前
Bun技术评估 - 16 Package Manager
javascript·后端·bun
袁煦丞26 分钟前
全球热点一键抓取!NewsNow:cpolar内网穿透实验室第630个成功挑战
前端·程序员·远程工作
qq_4591317029 分钟前
前端面试问题
前端
拾光拾趣录1 小时前
从“祖传”构造函数到 `class`
前端·javascript
wmm_会飞的@鱼1 小时前
FlexSim-汽车零部件仓库布局优化与仿真
服务器·前端·网络·数据库·数学建模·汽车
yvvvy1 小时前
从“按钮都不会点”到“能撸大厂 UI”:我用 react-vant 踢开组件库的大门!
前端·javascript
安然dn1 小时前
Cropper.js:JS图像裁剪库
前端·javascript
Serendipity2611 小时前
微服务架构
前端·微服务