我的叠加层将页面的其余部分向下推，而不是出现在顶部

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";
    }
}

有关信息：我正在使用 Foldy Grids 来确保我的 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 然后块将在 "main flow" 并将其余页面向下推。位置 fixed 和 absolute "remove" 此流中的块。

我的叠加层将页面的其余部分向下推，而不是出现在顶部

My overlay pushes the rest of the page down rather than appearing on top

html

javascript

css

overlay