Full page overlay appears behind

Question

I am trying to create a simple full page overlay with bootstrap.

However the overlay is appearing 'behind' my main content (a blue box in the example).

I'm sure I am missing something very obvious however any help would be appreciated.

I need to overlay to disappear when the page is clicked anywhere, this is working.

I have included my current code and a jsfiddle. You can see that the overlay is behind the blue box, which seems to load first?

HTML

<div class="overlay overlay-data">
    <p>click anywhere to close this overlay</p>
</div>

<div class="col-md-4">
    <div class="menu-item blue">
        <p>MY INFO BOX</p>
    </div>
</div>

JS

$(document).ready(function () {
    $(".overlay").addClass('overlay-open');
    $("section").addClass('blur');
});

$(document).on('click', '.overlay', function () {
    $(".overlay").removeClass('overlay-open');
    $("section").removeClass('blur');
});

CSS

.blur {
    -webkit-filter: blur(2px);
}
.overlay {
    position: fixed;
    width: 100%;
    height: 100%;
    background: #000;
}
.overlay p {
    text-align: center;
    position: relative;
    top: 20%;
    height: 60%;
    font-size: 80px;
}
.overlay-data {
    opacity: 0;
    visibility: hidden;
    -webkit-transition: opacity 0.5s;
    transition: opacity 0.5s;
    visibility: 0s 0.5s;
    transition: opacity 0.5s, visibility 0s 0.5s;
}
.overlay-open {
    opacity: 0.5;
    visibility: visible;
    -webkit-transition: opacity 0.5s;
    transition: opacity 0.5s;
}
.blue {
    background: #28ABE3;
}
.menu-item {
    padding-top: 45px;
    padding-bottom: 45px;
    margin-bottom: 45px;
    transition: all 0.3s;
    border: 5px solid transparent;
}

Answer 1

Use z-index to add overlay effect use this css

.overlay {
    position: fixed;
    width: 100%;
    height: 100%;
    background: #000;
    z-index:99999
}

Answer 2

Specify the z-index in your css to be greater than your main content.

.overlay {
    position: fixed;
    width: 100%;
    height: 100%;
    background: #000;
    z-index: 1;
}

JSFiddle

Read more about it at MDN, z-index.