Chrome扩展插入图片定位异常 如何设置左上角/自定义坐标位置

你设置的top、left样式不生效、图片跑到页面底部，核心原因是缺少定位规则：

• 网页元素默认是position: static静态定位，该定位模式下top/left等偏移属性完全无效，元素会按照正常文档流顺序排列
• 你直接将图片append到body末尾，自然会排在所有现有页面内容的最后，出现在页面底部位置
• 没有设置层级的话，图片还可能被页面其他元素遮挡

所有样式直接通过JS设置内联样式即可，不需要独立CSS文件。

固定显示在页面左上角 #

使用position: fixed定位，图片会相对于浏览器视口固定在左上角，页面滚动时位置也不会变，且完全脱离文档流，不会影响原有页面布局。
修正后的完整代码：

function imageappend() {
  const img = document.createElement("img");
  img.src = chrome.runtime.getURL("imageedit_1_3932659157.png");
  // 核心：设置固定定位
  img.style.position = "fixed";
  // 左上角偏移量
  img.style.top = "0";
  img.style.left = "0";
  // 清除默认内外边距
  img.style.padding = "0";
  img.style.margin = "0";
  // 设置极高层级，避免被页面其他元素遮挡
  img.style.zIndex = "999999";
  // 可选配置：如果不需要点击图片，加上这句不会遮挡页面原有元素的点击事件
  // img.style.pointerEvents = "none";
  document.body.appendChild(img);
}

let [tab] = await chrome.tabs.query({ active: true, currentWindow: true });

chrome.scripting.executeScript({
  target: { tabId: tab.id },
  function: imageappend
});

支持自定义坐标设置位置 #

可以通过注入脚本的传参能力，自定义图片的X、Y坐标，还可以选择定位模式：

• position: fixed：相对于浏览器视口定位，滚动页面时图片位置保持不变
• position: absolute：相对于页面文档定位，滚动页面时图片会跟着页面内容一起移动
  代码示例：

// 支持自定义位置的图片插入方法
// 参数：posX=水平偏移量(px), posY=垂直偏移量(px), useFixed=是否使用固定定位
function imageappend(posX = 0, posY = 0, useFixed = true) {
  const img = document.createElement("img");
  img.src = chrome.runtime.getURL("imageedit_1_3932659157.png");
  img.style.position = useFixed ? "fixed" : "absolute";
  img.style.top = `${posY}px`;
  img.style.left = `${posX}px`;
  img.style.padding = "0";
  img.style.margin = "0";
  img.style.zIndex = "999999";
  document.body.appendChild(img);
}

let [tab] = await chrome.tabs.query({ active: true, currentWindow: true });

// 注入时传参，示例：将图片放在水平100px、垂直200px位置，跟随页面滚动
chrome.scripting.executeScript({
  target: { tabId: tab.id },
  function: imageappend,
  args: [100, 200, false]
});

注意：如果使用absolute定位出现位置偏移异常，是因为页面存在设置了非静态定位的父级元素，这种场景下优先使用fixed定位，不会受页面父元素定位规则影响，兼容性更好。

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