Making a div float over other content

Question

I have noticed with the alert function that you can not change the title or add images into it for security reasons but I still need something like it for my game that I'm making so I decided to make a div but I need it to hover over the entire page but as you will see in the code snippet it appears to below the page not over can someone show me how to fix this.

//the function for the button
var no = function(){
  //the div
  var div= document.createElement("div");
  div.style.height="400px";
  div.style.background="red";
  div.innerHTML="<h1>what!</h1><p>im not alive</p>";
  document.body.appendChild(div);
};

<!--what i want the div to hover over-->
<h1>hello world</h1>
<p>am i alive</p>
<button onclick="no()">press me to find out</button>

Answer 1

You need to use the following:

1. Position: should be fixed.
2. Co-ordinates: should be centred.
3. Use CSS for styling and JavaScript for interactions.

Snippet

//the function for the button
var no = function() {
  //the div
  var div = document.createElement("div");
  div.innerHTML = "<div class='mask'><h1>what!</h1><p>im not alive</p></div>";
  document.body.appendChild(div);
};

.mask {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background: #f00;
  z-index: 100;
}

<!--what i want the div to hover over-->
<h1>hello world</h1>
<p>am i alive</p>
<button onclick="no()">press me to find out</button>