如何让 Div 超过 body

Question

我打算为 Firefox 开发一个插件，但我的设计有问题。为了解释下图中的情况，您会看到一个弹出窗口，其中有一个深灰色框。这个盒子我从上到下制作动画，所以它在弹出窗口中移动缓慢。这是 div，我希望 div 位于白色 body 上方。所以 div 是动画的，后面的一切都不再可见，但 div 与 body 具有相同的宽度和相同的高度。您仍然可以在左右、顶部和底部看到 body，但为什么呢？ div 超过 body 设计怎么办？

图片：http://prntscr.com/puo44r

这是我的代码：

<!DOCTYPE html>
<html>
<head>
          <meta http-equiv="content-type" content="text/html; charset=utf-8" />
</head>
<style>
          body {
                    background-color: white;
                    width: 385px;
                    height: 520px;
                    text-align: center;
          }

          .kw_popup {
                    display: none;
                    background-color: #333;
                    width: 385px;
                    height: 520px;
                    z-index: -1;
          }
</style>
<body>
          <div class="kw_popup" id="kw_dark">
          </div>
</body>
<script src="jquery.min.js"></script>
<script>$(document).ready(function () {
                    $("#kw_dark").slideDown("slow");
          });</script>

</html>

Answer 1

您可以将 position: fixed 添加到 div。

当元素具有 position: fixed 时，它将从页面流中移除，并将位于页面的每个元素之上。

希望这对您有所帮助.. 如果没有，请留下评论 :)

如何让 Div 超过 body

How to make Div over a body

html

javascript

css

popup