如何用JavaScript/jQuery在浏览器指定位置显示可视化覆盖元素？

这种要在指定位置显示可视化元素且不干扰原页面的场景，绝对定位的独立覆盖层是最优解——完全不需要改动原有页面的任何标记，还能精准控制位置。

核心实现思路 #

我们会动态生成一个独立的容器，把<hr>或图片线条放在里面，通过CSS定位把它放到你指定的left:336px、top:378px位置上。关键要给这个容器加pointer-events: none，这样它不会拦截页面的点击、hover等交互，彻底做到“只显示不干扰”。

具体实现步骤 #

1. 方式一：用<hr>做线条

直接动态生成<hr>并挂载到覆盖层里，示例代码：

// 第一步：创建覆盖层容器
const overlay = document.createElement('div');
// 核心样式：固定定位到指定位置，不拦截交互，确保在最上层
overlay.style.position = 'fixed';
overlay.style.left = '336px';
overlay.style.top = '378px';
overlay.style.pointerEvents = 'none';
overlay.style.zIndex = '9999';

// 第二步：创建自定义样式的hr线条
const line = document.createElement('hr');
line.style.width = '120px'; // 自定义线条宽度
line.style.border = 'none';
line.style.height = '2px';
line.style.backgroundColor = '#2c3e50'; // 自定义线条颜色
line.style.margin = '0'; // 去掉hr默认的margin

// 第三步：把线条加到覆盖层，再挂载到页面
overlay.appendChild(line);
document.body.appendChild(overlay);

2. 方式二：用图片做线条

如果是图片格式的小线条，只需要把<hr>换成<img>即可，示例代码：

// 同样先创建覆盖层容器
const overlay = document.createElement('div');
overlay.style.position = 'fixed';
overlay.style.left = '336px';
overlay.style.top = '378px';
overlay.style.pointerEvents = 'none';
overlay.style.zIndex = '9999';

// 创建图片元素
const lineImg = document.createElement('img');
lineImg.src = '你的图片资源路径'; // 替换成你的图片URL
lineImg.style.width = '120px'; // 按需调整图片宽度
lineImg.style.height = 'auto'; // 保持图片比例

// 挂载到页面
overlay.appendChild(lineImg);
document.body.appendChild(overlay);

额外优化建议 #

• 如果你的偏移量是相对于页面中某个特定元素的（而不是全局页面），可以把覆盖层的position改成absolute，然后把它挂载到那个特定元素的父容器里（记得给父容器加position: relative），这样定位会更精准。
• 如果之后需要移除这个线条，只要保存好overlay的引用，调用overlay.remove()就能一键清除，非常方便。

内容的提问来源于stack exchange，提问作者user8032076