如何让 div 覆盖每个 HTML 元素？

Question

我正在制作一个 google 扩展程序，该扩展程序创建了一个覆盖 https://mail.google.com/ 站点中每个 HTML 元素的 div。但是，我的代码只覆盖了正文，而不是顶部的导航栏。我该如何解决这个问题？

contentScript.js

chrome.runtime.onMessage.addListener((request,sender,sendMessage)=>{
  if(request==='execoverlay'){
   // your code goes here 
      var div = document.createElement('div');
      let bar = document.getElementById('gb');
      bar.style.zIndex = -1;
      div.style.width = "100%";
      div.style.height = "100%";
      div.style.position = "fixed";
      div.style.left = 0;
      div.style.zIndex = 0;
      div.style.top = 0;
      div.style.backgroundColor = "red";
      var label = document.createElement('span');
      label.textContent = "Hello, world";
      div.appendChild(label);
      document.body.appendChild(div);
      sendMessage({msg:'recieved'})
  }
})

网页的样子：

Answer 1

将 contentScript.js 中的 zIndex 更改为更大的数字，因为更大的索引会使其显示在顶部。

解决方案代码：

div.style.zIndex = 100;