Question

我正在尝试制作一个灯箱样式的Jquery功能。不幸的是，包含图片div（.container）的.lightboxbackground 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/

Answer 2

.container是他们的“参考框架”，可以这么说。 .container后代的100％宽度和高度对于它们来说意味着200px。

此外，是达到100％高度的方法。其中之一是在height和html上明确定义body，以便您可以使用此参考。

所以：

将.container作为body
的孩子
```
<body>
  <div class="container">...
```
删除.container的{{1}}和width
添加以下样式：
```
height
```

父母和孩子两个位置：绝对。如何让孩子占用100％的页面宽度和高度？

2 个答案: