灯箱覆盖位置绝对无法正常工作

Question

Hey Stackoverflow Community，

我有一个简单的灯箱脚本，页面上有一些图像，但它不知何故无法正常工作。当我使用 position:fixed 然后叠加时，它是完整的并且图像粘在顶部，但是当我使用 position:absolute 时，它被剪切到页面的一半并且图像消失在顶部。

我一定错过了什么很容易的东西，对吧？也许我的HTML结构是错误的？错误可以在这里找到 现场 - http://kriskorn.eu/lightbox-error/

谢谢大家的帮助！
克里斯

Answer 1

这里有两个问题

1）您在.main p中使用padding-top: 700px;，这会迫使图像向下页面。并且具有绝对位置，图像永远无法以叠加显示。覆盖div 将与滚动一起上升 .here position:fixed可以工作.原因是位置固定，内容将向上移动，叠加层将保持在固定位置。

2）您应该使用opacity:0.*或任何浅色，您正在使用0.95不会显示div下方的内容。

这应该有效，请检查

#overlay {
  background-color: rgba(255,255,255,0.3);
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  text-align: center;
   /* display: none; */
}

使用绝对位置，它不会覆盖所有页面。这是令人惊讶的。你为什么使用这个？？

.main p {
  padding-top: 700px;

}

这也可以是一种选择。

.main p {
      padding-top: 10px;
   }
#overlay {
  background-color: rgba(255,255,255,0.3);
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  /* display: none; */
  text-align: center;
}

Answer 2

似乎我一直在寻找的答案是，如果没有某种JavaScript代码，你就无法拥有position:absolute。毕竟我用过position:fixed，因为这已经对我有用了。