Мое наложение толкает остальную часть страницы вниз, а не появляется сверху

Question

Я хочу, чтобы над текущим экраном появилось <div>, когда пользователь нажимает на изображение, затемняя фон за оверлеем. Однако вместо <div>, появляющегося над верхней частью экрана в текущей позиции, он выталкивает все под фон.

Снимок экрана перед наложением:

Экран после применения наложения (видно, что он выталкивает другие элементы под ним):

Вкл. примечание, есть ли способ, которым, просто нажав на затемненный фон (вне наложения), он закрывает наложение вниз?

HTML:

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 , чтобы убедиться, что все мои дивы отзывчивы и т. Д. c.

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, тогда блок будет в «главном потоке», а pu sh на остальной странице вниз. Позиции fixed и absolute "удалить" блок из этого потока.