Parent and child divs both position: absolute. How to make child div take up 100% width and height of page?

Parent and child divs both position: absolute. How to make child div take
up 100% width and height of page?

I am trying to make a light box style Jquery function. Unfortunately, the
div that contains the image I want to make pop out and enlarge has
position:absolute and z-index: 10 so my pop up box and background fader
only take up the width and height of that parent (.container) div eg:
Would anyone know a way around this so that my .lightboxbackground and
.lightbox divs can cover the whole screen?
<div class='container'>
<div class='lightboxbackground'>
<div class='lightbox'>
<img src='image.jpg'/>
</div>
</div>
</div>
.container {
position: absolute;
z-index:10;
width: 200px;
height: 200px;
}
.lightboxbackground {
background-color:#000;
opacity: 0.9;
width: 100%;
height: 100%;
position:absolute;
z-index: 11;
}
.lightbox {
width: 500px;
height: 500px;
position:absolute;
z-index: 12;
}