当前位置：首页 > article >正文

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

article 2026/1/22 21:36:17

一、需求

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

二、实现

<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 子级。

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

一、需求 “求职入口” 下面的浮窗位置在其正下方，并且浏览器分辨的改变（拖动浏览器），位置依旧在最下方二、实现 <div class"btn_box"><div class"btn_link id"js-apply">求职入口<di…...

编程日记 2026/1/15 5:44:36

串口接收的使用-中断

1、引言单片机串口、按键等等这种外部输入的， 用轮询的方式非常浪费资源，所以最好的方法就是使用中断接收数据。 2、串口对于串口中断， 使用的非常频繁。 1. 基本原理串口中断接收通过以下方式工作： 当串口接收到一个字节…...

编程日记 2026/1/15 5:44:40

处理 Flutter 没有反应

现象有以下几种 VS Code 中 Initializing the Flutter SDK. This may take a few minutes. 会一直维持在这个右下角提示窗, 但是无后续动作 Flutter CMD flutter_console.bat 执行 --version 或者 doctor [-v] 没有任何输出, 命令卡住解决办法参考官方说明管理员身份…...

编程日记 2026/1/15 5:44:46

Linux-服务器负载评估方法

在 Linux 服务器中，top 命令显示的 load average（平均负载）反映了系统在特定时间段内的负载情况。它通常显示为三个数值，分别代表过去 1 分钟、5 分钟和 15 分钟的平均负载。 1. 什么是 Load Average？ Load average …...

编程日记 2025/10/16 8:49:56

入门51单片机(1)-----点灯大师梦开始的地方

前言这一次的博客主要是要记录一下学习的记录的,方便以后去复习一下的，当然这篇博客还是针于零基础的伙伴萌，看完这篇博客，大家就可以学会点灯了。安装软件方法一下一下来教！！萌新宝贝萌可以学会的！帮…...

编程日记 2026/1/19 1:16:58

3.数组(随想录)

1.二分查找 *2.移除元素还有一个小优化（可以不看） 3.有序数组的平方 *4.长度最小的子数组 （3种解法） 5.螺旋矩阵 ||...

编程日记 2026/1/15 5:44:51

解决import pyqtgraph.opengl报错

在使用pyqtgraph时，出现没有OpenGL模块的报错报错信息 ModuleNotFoundError: No module named OpenGL 解决方案该环境下没有安装OpenGL库导致，输入以下代码进行安装： pip install PyOpenGL conda install -c conda-forge pyopengl 安…...

编程日记 2026/1/9 5:22:56

大模型面经 | 请你介绍一下ReAct（Reasoning and Acting）？

大家好，我是皮先生！！今天给大家分享一些关于大模型面试常见的面试题，希望对大家的面试有所帮助。往期回顾：大模型面经 | 春招、秋招算法面试常考八股文附答案（RAG专题一）大模型面经 | 春招、秋招算法面试常考八股文附答案（RAG专题二）大模型面经 | 春招、秋招算法…...

编程日记 2025/12/9 4:31:56

C#设计模式-状态模式

状态模式案例解析：三态循环灯的实现案例概述本案例使用状态模式（State Pattern） 实现了一个三态循环灯的功能。每点击一次按钮，灯的状态会按顺序切换（状态1 → 状态2 → 状态3 → 状态1...）&#xff…...

编程日记 2026/1/15 5:45:02

LLM实现text2SQL实战总结

LLM在组织内部应用的一类重要场景就是利用LLM的NL2SQL能力，简化用户对数据库的访问。本文主要介绍如何使用LLM生成SQL语句，不涉及到如何训练提升LLM的SQL生成能力。开启正文之前，我们先明确一下这类功能在组织内服务的目标群体。我们将服务目…...

编程日记 2025/11/29 21:36:52

字节跳动开源 LangManus：不止是 Manus 平替，更是下一代 AI 自动化引擎

当 “AI 自动化” 成为科技领域最炙手可热的关键词，我们仿佛置身于一场激动人心的变革前夜。各行各业都在翘首以盼，期待 AI 技术能够真正解放生产力，将人类从繁琐重复的工作中解脱出来。在这个充满无限可能的时代，字节跳动悄然发布…...

编程日记 2026/1/15 5:45:08

21.C++11

1.列表初始化 1.1C11中的{} •C11以后想统⼀初始化⽅式，试图实现⼀切对象皆可⽤{}初始化，{}初始化也叫做列表初始化。 • 内置类型⽀持，⾃定义类型也⽀持，⾃定义类型本质是类型转换，中间会产⽣临时对象，最…...

编程日记 2026/1/8 22:56:40

STM32 HAL库之WDG示例代码

独立看门狗（IWDG） 初始化独立看门狗，在main.c中的 MX_IWDG_Init();，也就是iwdg.c中的初始化代码 void MX_IWDG_Init(void) {/* USER CODE BEGIN IWDG_Init 0 *//* USER CODE END IWDG_Init 0 *//* USER CODE BEGIN IWDG_Init 1 …...

编程日记 2026/1/8 8:34:36

Spring AI 发布了它的 1.0.0 版本的第七个里程碑（M7）

Spring AI 发布了它的 1.0.0 版本的第七个里程碑（M7），下个月就是 RC1，紧接着就是 GA！，对于我们 Java 开发者来说，这绝对是个值得关注的好消息！ 但是对于 Java 学习者来说&#xff0c…...

编程日记 2026/1/12 4:56:32

jdk 安装

oracle官网 : Java Archive | Oracle 中国 export JAVA_HOME/Users/xxxxx/app/services/x86jdk/jdk1.8.0_431.jdk/Contents/Home export PATH$JAVA_HOME/bin:$PATH 华为镜像网站：Index of java-local/jdk...

编程日记 2026/1/8 8:34:09

Windows服务器组建与综合服务部署技术方案

目录一、项目背景与需求分析 1.1 企业网络架构 1.2 核心服务需求矩阵二、Active Directory与权限管理体系 2.1 用户账户标准化 2.2 文件服务器纵深防御三、高可用服务集群构建 3.1 分布式文件服务(DFS) 3.2 打印服务高可用方案四、安全加固与审计体系 4.1 本地安…...

编程日记 2025/12/1 4:16:13

3.2.2.2 Spring Boot配置视图控制器

在Spring Boot中配置视图控制器可以简化页面跳转跳逻辑。通过实现WebMvcConfigurer接口的addViewControllers方法，可以直接将URL映射到特定的视图，而无需编写控制器类。例如，将根路径"/"映射到welcome.html视图，当访问应…...

编程日记 2025/12/30 2:13:17

华为OD机试真题——找出两个整数数组中同时出现的整数（2025A卷：100分）Java/python/JavaScript/C++/C语言/GO六种最佳实现

2025 A卷 100分题型本文涵盖详细的问题分析、解题思路、代码实现、代码详解、测试用例以及综合分析；并提供Java、python、JavaScript、C++、C语言、GO六种语言的最佳实现方式！华为OD机试真题《找出两个整数数组中同时出现的整数》：目录题目名称：找出两个整数数组中同…...

编程日记 2026/1/22 4:03:45

Go 1.24 新方法：编写性能测试用例方法 testing.B.Loop 介绍

Go 开发者在使用 testing包编写基准测试用例时，如果不注意，可能会遇到各种陷阱。这些陷阱，导致基准测试结果不准确。Go1.24 版本引入了一种新的基准测试编写方式，它同样易用，并且可以帮助规避编写基准测试时的一些坑。…...

编程日记 2025/11/29 9:09:22

烽火ai场控接入deepseek自动回复话术软件

要将烽火AI场控软件与DeepSeek自动回复话术软件进行对接，实现直播间自动互动功能，需通过API接口或脚本工具完成数据互通。以下是具体操作步骤及注意事项： 确认兼容性与准备工作软件支持检查确认烽火AI场控是否开放API接口（一般需…...

编程日记 2025/12/30 14:26:02

Spring AOP 学习笔记之 Advice详解

学习材料：https://docs.spring.io/spring-framework/reference/core/aop/ataspectj/advice.html 1. 什么是 Advice（通知） 定义：Advice 是 AOP 的核心概念之一，表示在特定的连接点（Join Point）上…...

编程日记 2025/11/28 17:37:05

【Linux系统】进程地址空间

命令行参数 int main (int argc, char* argv[]) 命令行参数列表 argc：参数的个数argv：参数的清单 int main (int argc, char* argv[]) {printf("argc: %d\n",argc);for(int i 0; i < argc; i){printf("argv[%d] : %s \n", i…...

编程日记 2025/12/30 19:26:52

记录学习的第二十六天

还是每日一题。今天这道题有点难度，我看着题解抄的。之后做了两道双指针问题。这道题本来是想用纯暴力做的，结果出错了。😓...

编程日记 2025/12/30 15:35:03

python成功解决AttributeError: can‘t set attribute ‘lines‘

文章目录报错信息与原因分析解决方法示例代码代码解释总结报错信息与原因分析在使用 matplotlib绘图时，若尝试使用 ax.lines []来清除图表中的线条，会遇到AttributeError: can’t set attribute错误。这是因为 ax.lines是一个只读属性，不…...

编程日记 2026/1/12 13:11:34

测试认识bug

一、软件测试生命周期与测试模型 1. 软件（开发）生命周期：包括需求分析、计划、设计、编码、测试、运行维护阶段。需求分析是起始点，明确用户需求，后续阶段依此展开。例如开发电商软件，需求分析阶段确定商品…...

编程日记 2026/1/18 22:25:12

Mysql主从复制有哪些方式

MySQL 主从复制主要有以下几种方式，根据不同的分类标准（如同步机制、数据复制格式、拓扑结构等）可以分为： 一、按同步机制分类 1. 异步复制 (Asynchronous Replication) 原理：主库提交事务后，立即返回给客…...

编程日记 2026/1/19 16:34:34

如何建立可复用的项目管理模板

建立可复用的项目管理模板能够显著提高项目执行效率、减少重复劳动、确保项目管理标准化。在企业中，项目管理往往涉及多个步骤和多个团队，然而每次开始一个新项目时，如果都从头开始设计流程和文档，势必浪费大量的时间和精力。通过…...

编程日记 2026/1/20 15:09:23

Spring Cloud 服务间调用深度解析

前言在构建微服务架构时，服务间的高效通信是至关重要的。Spring Cloud 提供了一套完整的解决方案来实现服务间的调用、负载均衡、服务发现等功能。本文将深入探讨 Spring Cloud 中服务之间的调用机制，并通过源码片段和 Mermaid 图表帮助读者更好地理解…...

编程日记 2025/12/18 6:58:12

如何使用通义灵码玩转Docker - AI助手提升开发效率

一、引言 Docker 作为一种流行的虚拟化技术，能够帮助开发者快速搭建所需的运行环境。然而，对于初学者来说，掌握 Docker 的基本概念和使用方法可能会遇到一些挑战。本文将介绍如何利用通义灵码这一智能编码助手，帮助你更高效地学习…...

编程日记 2026/1/1 21:11:05

GGML源码逐行调试（下）

目录前言1. 简述2. 预分配计算图内存2.1 创建图内存分配器2.2 构建最坏情况的计算图2.3 预留计算图内存 3. 分词4. 模型推理与生成4.1 模型推理4.2 采样结语下载链接参考前言学习 UP 主比飞鸟贵重的多_HKL 的 GGML源码逐行调试视频，记录下个人学习笔记&#x…...

编程日记 2026/1/1 16:22:06

相关文章：