Скольжение div без перемещения соседнего содержимого

Я пытаюсь создать боковую панель, которая будет скользить и отображать содержимое, когда пользователь нажимает кнопку.

проблема, с которой я сталкиваюсь, заключается в том, что при нажатии все содержимое заголовка, тела и нижнего колонтитула перемещается.

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

Проверьте скрипку https://jsfiddle.net/livewirerules/tsmpraym/9/.

Ниже то, что я пробовал до сих пор

jQuery(document).ready(function($) {
    $("#side").click(function() {
        $('#slidable').animate({
            width: 'toggle'
        });
    });
})

#menu {
    background-color: green;
    height: 100px;
}

#footer {
    background-color: blue;
    height: 100px;
}

#content {
    background-color: red;
    height: 400px;
}

#side {
    float: left;
    width: 50px;
    height: 50px;
    background: #BBB;
}

.hide {
    display: none;
}

#slidable {
    float: left;
    height: 200px;
    background: #888;
    width: 200px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.min.js"></script>
<div id="slidable" class="hide">Foobar</div>
<div id="side">+</div>

<div id="menu">
    the menu
</div>
<div id="content">
    content
</div>

<div id="footer">
    the footer
</div>

Вы можете сделать это, установив абсолютную позицию для скользящего элемента. Проверьте здесь: jsfiddle.net/tsmpraym/12   —  person LiveEn    schedule 08.08.2016