Relative Positioning Example

by samih

HTML

<span class="filter-button-wrapper">
    <button class="filter-button">click me</button>
    <div class="filter-flyout"></div>
</span>

CSS

.filter-button-wrapper {
    position: relative;
}

.filter-flyout {
    position: absolute;
    top: 25px;
    left: 65px;
    
    /* below styles added only so you can see what's going on */
    background-color: darkblue;
    width: 200px;
    height: 200px;
    display: none;
}

JavaScript

$('.filter-button').on('click', function(){
    $('.filter-flyout').slideToggle(500);
});