Injecting a full browser-screen DIV into the body of the webpage

Question

Recently, I was tasked with developing a script that could be utilized on any website. As a test, I decided to use the Google search results page.

My goal is simple - to have a full-screen semi-transparent div displayed on any site for cookie notification purposes.

Below is the code I added to the results page:

 <div style="position:absolute; z-index:1;  width:100%; height:100%; margin:0px; left:0px;  opacity:0.5; background-color:blue;"></div>

This code snippet should be inserted before the closing "body" element.

Unfortunately, due to the Google logo and search bar taking precedence, I encountered an issue where...

Answer 1

Answer №1

To fix this issue related to z-index, simply apply the following CSS: z-index:200 .

<div style="position:absolute; z-index:200;  width:100%; height:100%; margin:0px; left:0px;  opacity:0.5; background-color:blue;"></div>

Answer 2

To fix this issue related to z-index, simply apply the following CSS: z-index:200 .

<div style="position:absolute; z-index:200;  width:100%; height:100%; margin:0px; left:0px;  opacity:0.5; background-color:blue;"></div>

Answer 3

If you want your script to work universally on all web pages and in any browser, make sure to set the z-index to 2147483647.

<div style="position:absolute; z-index:2147483647;  width:100%; height:100%; margin:0px; left:0px;  opacity:0.5; background-color:blue;"></div>

This will ensure that your div is positioned above all other elements in the DOM.

Answer 4

If you want your script to work universally on all web pages and in any browser, make sure to set the z-index to 2147483647.

<div style="position:absolute; z-index:2147483647;  width:100%; height:100%; margin:0px; left:0px;  opacity:0.5; background-color:blue;"></div>

This will ensure that your div is positioned above all other elements in the DOM.