怎么做<div>覆蓋整個頁面，而不僅僅是視口</div><div id="text_translate"><p>我正在嘗試讓一個 div 覆蓋我的整個頁面。 目前，問題在於它僅覆蓋視口的大小（例如 1920x1080px）。</p><p> 這就是我目前正在使用的 div 的 CSS ：</p><pre> #cursor-container { position: absolute; z-index: 99999; pointer-events: none; overflow-x: auto; background-color: rgba(0, 0, 0, 0.25); top: 0; left: 0; bottom: 0; right: 0; height: 100%; width: 100%; }</pre><p> 目前，它看起來像這樣：</p><p> <a href="https://i.stack.imgur.com/Zat4F.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Zat4F.png" alt="在此處輸入圖像描述"></a></p><p> 但它應該看起來像這樣：</p><p> <a href="https://i.stack.imgur.com/iAKcZ.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/iAKcZ.png" alt="在此處輸入圖像描述"></a></p><p> 我怎樣才能解決這個問題？</p></div>

Question

我正在嘗試讓一個 div 覆蓋我的整個頁面。 目前，問題在於它僅覆蓋視口的大小（例如 1920x1080px）。

這就是我目前正在使用的 div 的 CSS ：

#cursor-container {
  position: absolute;
  z-index: 99999;
  pointer-events: none;
  overflow-x: auto;
  background-color: rgba(0, 0, 0, 0.25);
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  height: 100%;
  width: 100%;
}

目前，它看起來像這樣：

但它應該看起來像這樣：

我怎樣才能解決這個問題？

Answer 1

首先，確保您使用的div是body元素的子元素，然后將 position 更改為position: fixed; ,

#cursor-container {
  position: fixed;
  top: 0;
  left: 0;

  margin: 0;
  padding: 0;

  height: 100%;
  width: 100%;

  z-index: 99999;
  pointer-events: none;
  overflow-x: auto;
  background-color: rgba(0, 0, 0, 0.25);
}

這將確保您的 div 保持固定在屏幕上，即使頁面向下滾動並且它將覆蓋整個屏幕

另外，將父級的寬度和高度也設置為 100%，

html, body {
  width: 100%;
  height: 100%;
}