Создание div-поплавка над другим контентом

Question

Я заметил с функцией предупреждения, что вы не можете изменить заголовок или добавить в него изображения по соображениям безопасности, но мне все еще нужно что-то подобное для моей игры, что я делаю, поэтому решил чтобы сделать div, но мне нужно, чтобы он зависал по всей странице, но, как вы увидите в фрагменте кода, он, кажется, ниже страницы, который не закончился, может показать мне, как это исправить.

//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

Вы должны использовать следующее:

1. Позиция: должна быть fixed.
2. Координаты: следует сосредоточить.
3. Используйте CSS для стилизации и JavaScript для взаимодействия.

Отрывок

//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>