灯箱叠加位置绝对无法正常工作

Question

嘿 Whosebug 社区，

我有一个简单的灯箱脚本，页面上有几张图片，但不知何故无法正常工作。当我在叠加层上使用 position:fixed 时，它已满并且图像粘在顶部，但是当我使用 position:absolute 时，它被切到页面的一半并且图像消失了最佳。

一定有什么我很想念的东西，对吧？也许我的 HTML 结构有误？可以在此处实时找到错误 - http://kriskorn.eu/lightbox-error/

感谢大家的帮助！
克里斯

Answer 1

这里有两个问题

1) 您在 .main p 中使用了 padding-top: 700px;，这会强制图像在页面下方。并且使用绝对位置，图像永远无法显示叠加。覆盖层 div 将随着滚动向上移动。这里 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，因为它已经为我工作了。

灯箱叠加位置绝对无法正常工作

Lightbox Overlay Position Absolute Not Working Correctly

css

lightbox

absolute