使一个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>