Question

Hey Stackoverflow社区，

我有一个简单的灯箱脚本，页面上有一些图像，但它在某种程度上无法正常工作。当我使用position:fixed然后覆盖，然后它已满并且图像粘到顶部，但是当我使用position:absolute时，它会在页面中间切割并且图像被移到最佳。

我必须有一些非常容易的东西，对吗？也许我的HTML结构错了？可以在此处找到错误 - http://kriskorn.eu/lightbox-error/

感谢您的帮助！
克里斯

Answer 1

这里有两个问题

1）您在padding-top: 700px;中使用.main p强制图片沿着页面向下移动。并且对于绝对位置，图像永远不会显示叠加。叠加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，因为那对我来说已经有用了。

灯箱覆盖位置绝对不能正常工作

2 个答案: