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

Question

I want a <div> to appear over the current screen when the user clicks on an image whilst darkening the background out behind the overlay. However rather than the <div> appearing just over the top of the screen in the current position, it pushes everything in the background beneath it.

Screenshot before Overlay:

Screen after Overlay has been applied (you can see it pushes the other elements beneath):

On a side note, is there a way in which just by clicking in the darkened out background (out of the overlay) it closes the overlay down?

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

For info: I am using Foldy Grids to ensure my divs are all responsive etc.

Answer 1

For div#specialBox try this:

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

And delete this (also for div#specialBox ) :

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

While div#specialBox hasposition: relative then the block will be in "main flow" and push the rest page down. Position fixed and absolute "remove" the block from this flow.