Question

如果一次又一次地回答，我道歉。我记得几年前当我第一次写完我的网站脚本时，我已经彻底搜索了一个答案，但我找不到一个。现在也一样。

最近我重新设计了我的网站脚本，所以我可以将它托管到Weebly上。 Here is one of the four pages of my site that I need help with.正如您所看到的，缩略图悬停在上方时弹出的图像绝对定位。对于大多数计算机分辨率和/或浏览器，这将使图像显示在指定的框之外。我怎么能把它们放在div的内左上角？或者更好的是，水平和垂直居中？

<section id="Sizes" style="float: left">
<a href="#Space">
<img class="Small" src="/files/theme/SampleD_Fun_Icon.png" width="150" height="150" alt="Sample 1: Day of Fun" />
<img class="Large" src="/files/theme/SampleD_Fun.png" width="150" height="150" alt="Sample 1: Day of Fun" />
</a>
...
</section>
<a id="Space"></a>
<span class="Popup">Hover over thumbnail to display sample artwork.</span>
<br style="clear: left" />

a:hover img.Small
{
    border: 5px solid #21568b;
    margin: 10px;
    text-decoration: none;
}
section#Sizes a img.Large
{
    border-width: 0;
    height: 0;
    left: 438px;
    position: absolute;
    top: 326px;
    width: 0;
}
section#Sizes a:hover img.Large
{
    height: 526px;
    left: 438px;
    position: absolute;
    top: 326px;
    width: 520px;
}
.Popup
{
    border: 3px solid;
    float: left;
    height: 272px;
    margin: 8px 20px 0px 0px;
    padding-top: 254px;
    text-align: center;
    width: 520px;
}

感谢您的时间。：）

Answer 1

TLDR：你不能在纯CSS中做到这一点。

如果将图像元素放在div元素内，则可以轻松地将图像定位在容器div中，然后使用top: 0; left: 0;之类的绝对定位（或使用许多其他方法）。但是，您需要使用JavaScript将悬停的缩略图与弹出的全尺寸图像相关联。

或者，您可以将完整尺寸的图像嵌套在缩略图元素中（就像您当前拥有的那样），但是您需要使用JavaScript将全尺寸弹出图像放在容器div中。

在两个备选方案中，我建议第一个：将所有弹出图像放在目标容器中，并在缩略图悬停时使用JavaScript显示或隐藏它们。通过JavaScript关联缩略图和完整大小的图像比编写定位代码更容易。

Answer 2

你的整个设计有点脆弱，我不建议首先以这种方式构建，但是你正在寻找实际的答案，所以这是我能做的最小的改变想到这会解决你的问题：

1）将其添加到样式表中：

body { position: relative; }

2）在main_style.css的第40行，将top: 326px更改为top: 316px，将left: 438px更改为left: 428px，以便它变为：

section#Sizes a:hover img.Large {position: absolute; top: 316px; left: 428px; width: 520px; height: 526px;}

这是如何运作的？

您的图像使用绝对定位。默认情况下，它相对于视口（窗口）有效。但是通过将主体转换为相对位置，它变为包含块，并且位置绝对相对于最近的包含块祖先。

现在，您的图像被固定在body元素中，而不是相对于窗口固定。由于在调整窗口大小时，body元素的边距会改变大小，因此会使内容的各个部分相对于彼此固定。然后你只需要从顶部和左侧移除10px，因为这是你的身体元素边框的大小，我们现在正在从边框内部进行测量。

Answer 3

我看到你已经在使用jQuery了，为什么不这样做呢？

$('.Small').on('mouseover', function(){
$('.Popup').empty().html($(yourtarget).attr('img' , 'src'));
});

$('.Small').on('mouseout', function(){
$('.Popup').empty().html('Hover over thumbnail to display sample artwork.');
});

Answer 4

仅仅因为每个人都说不能用纯粹的CSS进行，我想证明它可以，而且它甚至很容易。看看下面的例子：

http://jsfiddle.net/aafa2zp5/

<div id='images-wrapper'>
    <ul>
        <li>
            <img class='small' src='http://placehold.it/50/ff0000'/>
            <img class='big' src='http://placehold.it/300/ff0000'/>
        </li>
        <!-- and some more similar thumb / image groups -->
    </ul>
    <div class='preview-area'></div>
</div>

CSS（或至少相关部分）

#images-wrapper {
    position: relative;
}
.big {
    display: block;
    position: absolute;
    top: 54px;
    right: 54px;
    opacity: 0;
    transition: opacity .5s;
}  
.preview-area {
    width: 350px;
    height: 350px;
    border: 4px solid blue;
    position: absolute;
    top: 21px;
    right: 21px;
}
li:hover .big {
    opacity: 1;
}

关键是设置相对于包装器的位置（并将所有后代保持为默认静态）。然后，您可以使用它来定位预览区域和大图像，方法是将它们设置为绝对位置并仔细计算正确的位置。我甚至添加了一个交叉淡入淡出，只是因为它很容易，但如果你愿意，你也可以使用display block / none。

对于较小的屏幕，您可能想要更改媒体查询中的尺寸和位置，但它仍然应该是可行的（尽管取决于悬停状态可能不是触摸设备上的最佳想法）

我希望你明白这个想法，你可以弄清楚如何将这种技术应用到你自己的网站上。随意询问您是否希望我进一步解释或何时遇到困难。

如何将图像定位到div的左上角，如果div移动，请将其保留在那里？

4 个答案: