他のコンテンツの上に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>