Creating an overlay to fill the browser using Javascript

You will need to determine the best area within the document object model (DOM) to add the over. 

You are currently appending to the document.body, which means it is the last element in the document.body, which, by default is the top layer.

You are also setting the zIndex to 100, which also moves the element to the top.

In order to do what you are looking to do, you would need to publish the module, and then open the Developer Console in your browser, and find the location within the DOM that sandwiches the overlay between the locations you need to.

You can do this in realtime, by cutting the overlay out of the HTML, and trying it in different locations. 

I gave the overlay and ID of MY_OVERLAY just to make it easier to find.

var overlay = document.createElement("div");
overlay.id = "MY_OVERLAY";
overlay.style.position = "fixed";
overlay.style.top = "0";
overlay.style.left = "0";
overlay.style.width = "100%";
overlay.style.height = "100%";
overlay.style.backgroundColor = "rgba(33, 34, 33, 0.4)";
// commented this out, as you don't know the correct z-index until you know the correct location to insert the element.
// overlay.style.zIndex = "100";
overlay.style.pointerEvents = "none";
// This script will need to change when you determine the correct location in the DOM to insert the new element
document.body.appendChild(overlay);