我的覆盖将页面的其余部分向下推，而不是出现在顶部。

Question

我想要一个<div>出现在当前屏幕上，当用户点击一个图像，而黑暗的背景后，覆盖。然而，<div>不是出现在当前位置的屏幕顶部，而是将它下面的背景中的所有东西都推入其中。

覆盖前的屏幕截图：

​

应用覆盖后的屏幕(您可以看到它将其他元素推到下面)：

​

在另一个注意事项上，是否有一种方式，只要点击黑暗的背景(从覆盖)，它关闭覆盖？

HTML:

<section id="content">
    <div class="container">
        <section id="grid" class="clearfix">
            <div class="cf show-grid">
                <div class="row">
                <!-- Start Overlay -->
                <div id="overlay"></div>
                <!-- End Overlay -->
                <!-- Start Special Centered Box -->
                <div id="specialBox">
                <button onmousedown="toggleOverlay()">Close Overlay</button>
                </div>
                <!-- End Special Centered Box -->
                <!-- Start Normal Page Content -->
                <div id="wrapper">
                <button onmousedown="toggleOverlay()">Apply Overlay</button>
               </div>
               <!-- End Normal Page Content -->

               <div class="grid-2 dashboardIcons">
                   <h3 class="fontAmaticH1">Stress & Anxiety</h3>
                       <a href="stess-anxiety.php"><img src="images/stress.jpg"></a>
                </div>
                <div class="grid-2 dashboardIcons">
                    <h3 class="fontAmaticH1">Mindfulness</h3>
                       <a class="cursor" onmousedown="toggleOverlay()"><img src="images/mindfulness.jpg"></a>
                </div>

                <div class="grid-2 dashboardIcons">
                     <h3 class="fontAmaticH1">Exam Preperation</h3>
                        <a href="exam-prep.php"><img src="images/examPrep.jpg"></a>
               </div>
            </div>
            </div>
        </section>
    </div>
</section>

CSS:

/*Practising the overlays for modules */
div#overlay {
    display: none;
    z-index: 2;
    background: #000;
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0px;
    left: 0px;
    text-align: center;
}
div#specialBox {
    display: none;
    position: relative;
    z-index: 3;
    margin: 150px auto 0px auto;
    width: 500px; 
    height: 300px;
    background: #FFF;
    color: #000;
}
div#wrapper {
    position:absolute;
    top: 0px;
    left: 0px;
    padding-left:24px;
}

JS:

/* This is for the page overloays within the module pages */
function toggleOverlay(){
  var overlay = document.getElementById('overlay');
    var specialBox = document.getElementById('specialBox');
    overlay.style.opacity = .8;
    if(overlay.style.display == "block"){
        overlay.style.display = "none";
        specialBox.style.display = "none";
    } else {
        overlay.style.display = "block";
        specialBox.style.display = "block";
    }
}

关于信息:我正在使用折叠式网格来确保我的div都是响应的等等。

Answer 1

对于div#specialBox，请尝试如下：

position: fixed;
top: 150px;
left: 50%;
transform: translateX(-50%); /* this will place it in the center */

并将其删除(也适用于div#specialBox__)

position: relative;
margin: 150px auto 0px auto;

虽然div#specialBox有position: relative，但是块将位于“主流”中，并将rest页面向下推。将fixed和absolute“移除”此流中的块。