z-index and opacity - how to hide the div

Question

Trying to make a website with a friend of mine and we're having problems with the divs at other divs with opacity.

Here's a picture to make it clear:

As you can see, the circle (div) is visible through the black bar. But we want it to be as on the left side of the picture.

Any ideas how to fix it?

//The black bar
.top-bar {
    width: 100%;
    height: 100px;
    background-color: black;
opacity: 0.8;
}

//A circle
.textbox_how {
    width: 820px;
    height: 820px;
    border: 20px #e8c499 solid;
    border-radius: 100%;
    left: 50%;
    position: absolute;
    top: 5%;
    text-align: center;
    z-index: -1;
}

//The other circle
.textbox_how_around {
    width: 840px;
    height: 840px;
    border: 10px brown solid;
    border-radius: 100%;
    left: 50%;
    position: absolute;
    top: 5%;
    text-align: center;
    z-index: -1;
}

Answer 1

@trunks175 is correct. Put a dummy behind the header with a white background.

<div style="position:absolute;top:0;left:0;opacity:0.5;background:red;height:300px;width:300px;z-index:3"></div>
<div style="position:absolute;top:0;left:0;background:white;border:1px solid green;height:300px;width:300px;z-index:2"></div>
<div style="position:absolute;top:100px;left:100px;background:blue;height:300px;width:300px;z-index:1"></div>

Here's a fiddle: http://jsfiddle.net/teRcg/1/

I believe this is the only way to achieve what you're trying to since the header is opaque.