Why is positioning not working correctly?

Question

css

There is this code:

html:

<section class="header">
    <div class="container">
        <div class="row">
            <div class="col-md-12">
                Test Header
            </div>
        </div>
    </div>
</section>
<section class="main">
    <div class="container">
        <div class="row">
            <div class="col-md-12">
                <a href="#." class="btn btn-lg btn-primary">Click here!</a>
                <hr>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque id neque lacinia, facilisis orci in, rhoncus urna. Quisque ut sem lobortis sapien pretium pellentesque. Quisque vulputate accumsan leo, ut malesuada nisi lobortis nec. In libero nunc, aliquam vulputate tincidunt non, varius nec arcu. Integer dignissim urna ipsum, non fermentum metus pharetra at. Suspendisse eget tincidunt enim. Integer ornare eleifend lacus, a vehicula metus tincidunt non.</p>
            </div>
        </div>
    </div>
</section>
<section class="main overlay">
    <div class="container">
        <div class="row">
            <div class="col-md-12 text-center">
                Test Overlay Div
            </div>
        </div>
    </div>
</section>

css:

.header {
    padding: 47px 0;
}

.main { 
    background-color: lightgrey; 
    padding: 47px 0;
    display: block;
    text-align: center;
}

.overlay { 
    background-color: rgba(211,211,211,.8); 
    position: absolute;
    width: 100%;
    display: none;
}

.overlay .container {
    display: table;
    table-layout: fixed;
    height: 100%;
    font-size: 1.5em;
}

.overlay .row {
    display: table-cell;
    vertical-align: middle;
    height: 100%;
}

javascript:

$(document).ready(function() {
    $('a').click(function() {
       var _offset = $('.main').offset(),
           _height = $('.main').height();
       $('.overlay').offset({ top: _offset.top, left: _offset.left}).height(_height).fadeIn('fast', function () {
           setTimeout(hideOverlay, 1000);
       });
    });
    
    function hideOverlay() {
        $('.overlay').fadeOut();
    }
});

At the core, jQuery and Bootstrap are loaded. This example does not work as it should, for some reason the overlay moves out every time, although the position of the overlapped block does not change.

Here you can see how it works: https://jsfiddle.net/w3pe9kme/

Where is my mistake in positioning the overlay block?

Answer 1

Hello, put .css instead of .offset and it will work. https://jsfiddle.net/w3pe9kme/10/