Display overlay to cover whole page

Question

I have a web app which is loading within an iframe. I need to display an overlay div to cover the whole page. The problem is that the overlay is currently displaying only in the iframe area and not covering the whole page, (Our application (a child application) is part of a set of applications loading in iframe)

Answer 1

You can do something like this

<div id="overlay"></div>

CSS

#overlay
{

  position:fixed;
  top:0;
  left:0;
  bottom:0;
  right:0;
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
  background: #000000;
  opacity: .3;
  filter: alpha(opacity=30);
  -moz-opacity: .3;
   z-index: 101;
}

Sample