<html>
<head>
<style>
DIV.one {
            position:absolute;
            top:10px;
            left:10px;
            background-color:rgb(0,0,255);
            width:200px;
            height:200px;
            }
            
DIV.two {
            position:absolute;
            top:10px;
            left:10px;
            background-color:rgb(0,255,0);
            width:180px;
            height:180px;
}

DIV.three-a {
            position:absolute;
            top:10px;
            left:10px;
            background-color:rgb(255,0,0);
            width:160px;
            height:160px;
            opacity:0;
}
DIV.three-b {
            position:absolute;
            top:80px;
            left:80px;
            background-color:rgb(255,255,0);
            width:200px;
            height:200px;
            opacity:0.5;
}
DIV.four {
            position:absolute;
            top:10px;
            left:10px;
            background-color:rgb(255,255,255);
            width:140px;
            height:140px;
            opacity:0.5;
}
P.desc { 
			position: absolute; 
			top:300px;
			left:10px;
			}
</style>
</head>
<body>
<div class="one">
<div class="two">
<div class="three-a">
Should not see this text.
<div class="four">
Should not see this text.
</div>
</div>
<div class="three-b">
</div>
</div>
</div>
<p class="desc">
Below are four boxes all within each other, and a box overlaping other boxes. The 3rd inner box is red, and has an opacity of zero, and the box within it is black and has an opacity of 0.5. As the third box has opacity zero, the inner black is not visible. The yellow block has opacity of 0.5, and is as the same level in the DOM tree as the 3rd inner box.
</div>
</body>
</html>