将div插入HTML页面上的所有其他内容之上

Question

我目前有这个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);

我也尝试过：

document.body.prepend(div);

请记住以下屏幕截图：

如果您查看Quora网站的屏幕截图，您会注意到我创建的div隐藏在其标题后面。

我假设让我的div高于Quora的唯一方法是CSS？有没有人知道一些方便的CSS几乎总是如果不总是把div放在页面上任何现有内容之上？

Answer 1

请尝试按照css文件中的代码进行操作

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

或

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

或

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

Answer 2

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

将位置固定为相对位置。然后你会看到你新添加的div。