Почему позиционирование работает не правильно?

Question

[Арсений Соколов]

Есть вот такой вот код:

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();
    }
});

В основе подгружается jQuery и Bootstrap. Вот этот пример работает не так как надо, почему-то overlay каждый раз съезжает, хотя позиция перекрываемого блока не меняется.

Вот здесь можно посмотреть как это работает: https://jsfiddle.net/w3pe9kme/

Где моя ошибка в позиционировании блока overlay?

Answer 1

[Arvils]

Привет, поставь .css вместо .offset и заработает. https://jsfiddle.net/w3pe9kme/10/

Comments

[Арсений Соколов]

Класс! Но почему offset именно так работает, почему он сдвигает позицию каждый новый вызов?

Answer 2

[Дмитрий Сидоренко]

Вот немного другой вариант решения вашей задачи: https://jsfiddle.net/w3pe9kme/12/

Comments

[Арсений Соколов]

Интересное решение кстати. Мне понравилось... ;)

[Дмитрий Сидоренко]

Арсен Беспалов: Пользуйтесь :)