HTML5原生验证气泡（::-webkit-validation-bubble）无法动态修改位置，因其是浏览器私有UI组件，无DOM节点、不支持JS控制坐标，且Chrome已废弃该样式；应改用自定义提示方案。
HTML5 原生表单验证失败时的气泡（即 ::-webkit-validation-bubble）**无法动态修改位置**。它由浏览器内核（仅 WebKit/Blink）自动计算并渲染，不暴露 DOM 节点，也不支持 JavaScript 控制坐标、偏移或锚点。你调用 reportValidity() 或触发提交后，气泡出现在哪，完全由浏览器决定，且不同版本、不同设备上表现可能不一致。
为什么不能改位置
原生气泡不是普通 DOM 元素，而是浏览器 UI 层的私有渲染组件：
- 仅 Chrome/Safari 支持，Firefox 和 Edge 完全不显示该气泡（只高亮边框或聚焦）
- 没有对应的 HTML 节点，
document.querySelector查不到，getBoundingClientRect()无法获取 - CSS 伪元素（如
::-webkit-validation-bubble）在现代 Chrome 中已基本被废弃，2021 年后新版本不再响应样式修改 - 所有 position、transform、z-index 等布局属性对它无效
可行的替代方案
若必须控制提示位置，应放弃依赖原生气泡，改用可编程的自定义提示：
-
用
setCustomValidity()+ 手动插入提示元素：在input后动态插入<span class="error-tip">邮箱格式错误</span>，配合position: absolute或fixed定位，并监听scroll/resize实时更新坐标 -
禁用原生验证，全面接管：给
<form>加novalidate，用form.checkValidity()判断状态，再通过layer.tips()（Layui）、Popover（Bootstrap）或自研 tooltip 显示在任意位置 -
轻量兜底用
title：对input设置title="请填写正确邮箱"，虽无样式、无定位控制，但无需 JS、无障碍友好、全浏览器生效
关键操作提醒
若你在用 setCustomValidity() 却没看到提示，注意两点：
- 必须配合事件触发验证，例如在
submit中调用form.checkValidity()并手动preventDefault()，否则不会显示任何反馈 - 每次用户输入后，需先调
input.setCustomValidity("")清空旧状态，再根据逻辑重新设置错误信息，否则验证状态会卡死
想精准控制气泡在哪出现，就得自己画一个——原生的，真做不到。
