html - 如何在我的 css 画廊中正确定位图像？

Question

嘿，这是我的第一个问题，所以如果我有任何问题，我很抱歉。

我正在尝试仅使用HTML 和 CSS 创建一个画廊，到目前为止，我已经将它全部对齐并且几乎已排序。问题在于悬停时的图像放大器，当您将鼠标悬停在放大的图像上时，它会显示在其各自图像的顶部，但是当您向下滚动并将鼠标悬停在图像上时，放大的图像会保持不动并且不会跟随图片。

我尝试过使用图像和悬停图像的位置属性，但我无法正确处理。不过，我仍然希望图像从 div 中“弹出”。

我在下面的链接上粘贴了代码：http:
//pastebin.com/fZxbKZEJ

Answer 1

将 更改position: absolute;为position:fixed;。这将使图像弹出相对于视图。玩弄margin正确的对齐方式。

例如：

margin: 100px auto 0;

所以，

.bigImage{         
     display:none;
     position:fixed;
     height:310px;
     width:250px;
     margin:100px auto 0;
     border:2px solid #39F;
 }

如果您只想让弹出窗口跟随原始图像，请执行此操作

.bigImage{         
     display:none;
     position:relative;
     height:310px;
     width:250px;
     margin:-260px 0 0 -45px;
     border:2px solid #39F;
 }