Why does the child inherit the opacity of the parent?

A simple question (I hope) that eludes me. I have an overlay for a modal window that sets the opacity to .87, however my div inside this (modal content) seems to inherit this opacity.

CSS

body { background-color:black; }
#overlay {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    text-align:center;
    z-index: 99;
    background-color: black;
    opacity:.87;
}

#overlay > div {
    width:300px;
    height:300px;
    margin: 100px auto;
    background-color: #fff;
    border:1px solid #000;
    padding:15px;
    text-align:center;
    opacity:1;
    z-index: 100;
}

HTML:

<div id="overlay">
    <div>some stuff here</div>
</div>

Here is a fiddle (the background should be pure white, not mixed). What am I doing wrong?