Chrome扩展插入fixed定位图片遮挡文字 margin设置无效如何解决

问题描述 #

我正在开发一款Google Chrome扩展程序，核心功能为向当前浏览网页中插入指定图片。目前图片插入逻辑已可正常运行，但存在插入图片覆盖页面原有文字内容的问题。
期望实现效果：插入的图片拥有独立布局空间，达到类似设置margin的排版效果——插入的蛇形图片位于页面logo及所有链接元素的左侧，页面其余所有内容整体向右小幅偏移以避让图片。
实际异常表现：为图片设置marginLeft、marginRight属性均未产生预期效果。

现有实现代码（popup.js） #

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.marginRight = "7%";
  img.style.marginLeft = "0";
  img.style.marginBottom = "0";
  img.style.marginTop = "0";
  img.style.width = "5%";
  document.body.appendChild(img);
}

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

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

问题效果截图 #

问题原因 #

margin属性对设置了position: fixed的元素不会产生推开其他正常流内容的效果。固定定位元素会完全脱离普通文档流，和页面其他元素不在同一个布局层级，不占用普通文档流的布局空间，给它设置的外边距只会影响自身位置，无法让其他页面元素主动避让。

修复方案 #

不需要给图片设置外边距，直接给页面根节点和body节点增加和图片宽度匹配的左侧内边距，就能让所有普通流的页面内容自动右移避让，同时给图片设置足够高的层级避免被页面内容覆盖即可。
修改后的imageappend函数代码：

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.width = "5%";
  // 提高图片层级，避免被页面其他元素遮挡
  img.style.zIndex = "99999";
  document.body.appendChild(img);

  // 给页面整体加左侧内边距，5%为图片宽度，额外1%作为内容和图片的间隙
  const offsetWidth = "6%";
  document.body.style.paddingLeft = offsetWidth;
  // 兼容页面内固定定位贴左的元素，同步给html节点加偏移
  document.documentElement.style.paddingLeft = offsetWidth;
}

适配说明 #

• 如果遇到部分站点本身对body/html设置了特殊padding、或者存在自定义固定侧边栏，可以根据实际场景调整偏移数值，或给对应固定在左侧的元素单独增加left: 6%样式做适配。
• 不建议将图片改为非fixed定位，否则页面滚动时图片会跟随内容移动，无法保持固定在视口左侧的效果。

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