灯箱叠加位置的绝对工作不正常

嘿社区＃1，灯箱叠加位置的绝对工作不正常

我有一个页面上的一些图像的简单脚本灯箱，但它在某种程度上并不如它应该工作。当我在覆盖图上使用position:fixed时，它会显示完整图像并将图像粘贴到顶部，但当我使用position:absolute时，它会在页面中间切割一半，然后图像会移到顶部。

必须有一些很容易我失踪，对吧？也许我的HTML结构是错误的？错误可以在这里找到 - http://kriskorn.eu/lightbox-error/

谢谢你的帮助！
克里斯

来源

2015-04-20 kriskorn

你想用绝对位置而不是固定来做什么？ –

可以请你详细说明为什么p标记有填充顶部：700px，请检查“.main p”类 –

@evan昨天我有另一个脚本，位置绝对正常工作，这样我也可以将我的图像定位到来自各方的页面。使用固定的定位，它不起作用。 --- 'p'标签有这样的填充，所以你可以看到为什么绝对定位失败。 – kriskorn

看来，我一直在寻找的答案是，你不能有position:absolute没有某种形式的JavaScript代码。毕竟我使用了position:fixed，因为那已经为我工作了。

来源

2015-04-23 14:32:00 kriskorn

这里有两个问题

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; 

}

来源

2015-04-20 12:18:03 MKD

是的，这有效，但这不是问题。我已经知道固定定位是可行的。现在我也在看一个Treehouse课程 - jQuery Basics，其中的代码与绝对定位一样。 – kriskorn

检查第二个解决方案。由于padding-top导致无法工作：700px;因为有了这个，你的图像就会进入窗口。 – MKD

“padding-top：700px”是模仿真实生活网站的地方。一个真实的网站的高度会更长，因此绝对回到文档开头的位置并不好。使用固定位置的图像不会出现问题，但使用该解决方案时，我无法将其居中放在页面上。我希望澄清这种情况。 – kriskorn

灯箱叠加位置的绝对工作不正常

回答

相关问题