(Easy) How to make a div overlay every single HTML element?

I'm making a google extension that creates a div that overlays every single HTML element in the https://mail.google.com/ site. However, my code only overlays the body, not the navbar at the top. How should I solve this issue?

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'})
  }
})

What the webpage looks like: