z-index和opacity - 如何隐藏div

Question

尝试与我的一个朋友建立一个网站，我们遇到了其他div不透明的div的问题。

这是一张清晰的图片：

如您所见，通过黑条可以看到圆圈（div）。 但我们希望它像图片的左侧一样。

任何想法如何解决？

//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是正确的。在白色背景的标题后面放一个假人。

<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>

这是一个小提琴：http://jsfiddle.net/teRcg/1/

我相信这是达到你想要的唯一方法，因为标题是不透明的。