javascript - 父子div的位置都是: absolute. 如何让子div占据页面100%的宽度和高度？

Question

我正在尝试制作一个灯箱风格的 Jquery 函数。不幸的是，包含我想要弹出并放大的图像 div (.lightboxbackground) 的 .container div 具有 position:absolute 和 z-index: 10 所以我的弹出框和背景推子只占用父级 (.container) div 的宽度和高度，例如:

有人知道解决这个问题的方法吗，以便我的 .lightboxbackground 和 .lightbox div 可以覆盖整个屏幕？

<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;
}

Answer 1

如果你想覆盖整个屏幕:

.lightboxbackground {
    background-color:#000;
    opacity: 0.9;
    width: 100%;
    height: 100%;
    position:fixed;
    left:0;
    top:0;
    z-index: 11; //I would advise to change this to z-index:1000 (Note: .lightbox must also adjust to this)
}

fid:http://jsfiddle.net/uH4MF/1/