Javascript 在HTML页面的所有其他内容上方插入div

我现在有这个JS，它是使用Chrome扩展注入到外部页面的。以下代码添加了一个div元素作为body元素的第一个子元素：

const div = document.createElement('div');
div.id = 'suman-per-tab-controls';
div.innerHTML = '<b>foooooo</b>';
document.body.insertBefore(div, document.body.firstChild);

记住以下屏幕截图：

如果你看Quora网站的截图，你会注意到我创建的div隐藏在它们的标题后面

---

我假设让我的div高于Quora的唯一方法是CSS？是否有人知道一些方便的CSS，它们几乎总是（如果不是总是）将div放在页面上任何现有内容的上方？

请尝试在CSS文件中输入以下代码

   .suman-per-tab-controls {
        position: absolute;
        z-index:9999;
    }

或

或

---

请在css文件中尝试以下代码

   .suman-per-tab-controls {
        position: absolute;
        z-index:9999;
    }

或

或

---

检查Quora导航栏。并将其位置属性从“固定”更改为“相对”

---

将固定位置更改为相对位置。然后您将看到新添加的分区。

检查Quora导航栏。并将其位置属性从“固定”更改为“相对”

---

将固定位置更改为相对位置。然后您将看到新添加的div。

尝试

位置：固定；z指数：99999它取决于页面上的其他CSS。在Quora的例子中，他们有一个固定的标题。z-index将其放在最前面，因此我现在可以看到我的内容…但我不能向下推他们的内容，然而…因此，我的内容将与他们的内容重叠。如果是这样的话，请使用CSS将
top:30px
添加到Quora标题的标题包装中，这样它就不会位于固定位置div的下方。注意：30px只是一个随机数，您必须弄清楚您真正应该添加多少。@Jesse谢谢，你知道一个很好的启发式方法来定位页面上最顶端的元素，这样我就可以添加你提到的CSS了吗？试试
position:fixed；z指数：99999它取决于页面上的其他CSS。在Quora的例子中，他们有一个固定的标题。z-index将其放在最前面，因此我现在可以看到我的内容…但我不能向下推他们的内容，然而…因此，我的内容将与他们的内容重叠。如果是这样的话，请使用CSS将
top:30px
添加到Quora标题的标题包装中，这样它就不会位于固定位置div的下方。注意：30px只是一个随机数，您必须弄清楚您真正应该添加多少。@Jesse谢谢，你知道一个很好的启发式方法来定位页面上最顶端的元素，这样我就可以添加你提到的CSS了吗？投票通过了，但我必须以编程的方式来做，我必须为1000多个不同的网站做这件事，不仅仅是Quora，它必须是通用的。你是否在iframe中加载网站？如果是这样的话，在iframe？Uppoted中添加边距，但我必须以编程方式执行此操作，我必须为1000多个不同的网站执行此操作，而不仅仅是Quora，它必须是通用的。您是否将网站加载到iframe中？如果是，请将边距添加到iframe？
   .suman-per-tab-controls {
       position: fixed;
       z-index:9999;
   }

   .suman-per-tab-controls {
       position: relative;
       z-index:9999;
   }