How to 'clip away' part of a div using CSS?

Question

This is more or less a scaled down version of what I got, but it's not what I want, as I want the green div to be partially transparent, so I'll be able to see whatever content is behind both of these divs (there is none in the example, but there is in my project). But the other div is blocking my view, so how would I 'clip away' part of that div?

Just a thought, there might even be a better method to solve this.

Just in case the link is broken:

HTML:

<div id="foregrounddiv2"></div>
<div id="foregrounddiv"></div>​

CSS:

#foregrounddiv2 {
  background-color:grey;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  position: fixed;
  z-index:2;
}
#foregrounddiv {
  background-color: green;  
  position: fixed;
  z-index: 3;  
  width: 100px;
  height: 100px;
  left: 50%;
  top: 50%;
  margin-top: -50px;
  margin-left: -50px;
}  

UPDATE: Sorry for the misunderstanding. The text I was talking about is situated behind both divs. Sorry about the bad naming too. I don't want any opacity on the #foregrounddiv2 div, I just want to be able to see the content through #foregrounddiv. Hope I make sense.

Answer 1

I think there is an another way to make a hole on div.

Define a very very wide border of a div and then you will have a "hole"

like this : http://jsfiddle.net/chanjarster/pG9Uy