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