I have a scaled down version of my project, but it's not quite what I need. I would like the green div to have some transparency so that the content behind both divs is visible (there is none in the example, but there is in my actual project). However, the other div is blocking my view. Is there a way to 'clip away' part of that div?
Perhaps there is a better solution for this issue.
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: Apologies for any confusion. The text I want to see is positioned behind both divs. Also, I don't want the #foregrounddiv2 div to have opacity, I simply want to be able to see through it and view the content behind #foregrounddiv. I hope that clarifies things.