如何将图像定位到 div 的左上角，并在 div 移动时将其保持在那里？

Question

如果这个问题得到了一次又一次的回答，我深表歉意。我记得几年前，当我第一次编写我的网站脚本时，我曾彻底寻找答案，但我一直找不到。现在也一样。

最近我修改了我网站的脚本，以便我可以将它托管到 Weebly 上。 Here is one of the four pages of my site that I need help with. 可以看到，鼠标悬停在缩略图上弹出的图片是绝对定位的。对于大多数计算机分辨率 and/or 浏览器，这将使图像显示在指定框中。我怎样才能将它们定位到 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 元素中，然后使用 top: 0; left: 0; 之类的绝对定位（或使用数字其他方法）。但是你需要 JavaScript 将悬停的缩略图与弹出的全尺寸图像相关联。

或者，您可以将全尺寸图像嵌套在缩略图元素中（就像您目前所做的那样），但是您需要 JavaScript 将全尺寸弹出图像放置在容器内div。

在这两种选择中，我推荐第一种：将所有弹出图像放在目标容器中，并使用 JavaScript 在缩略图悬停时显示或隐藏它们。通过 JavaScript 关联缩略图和全尺寸图像比编写定位代码更容易。

Answer 2

你的整个设计有点脆弱，一开始我不建议以这种方式构建，但你正在寻找实用的答案，所以这是我能想到的最小的改变来解决你的问题:

1) 将此添加到您的样式中 sheet:

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;}

这是如何运作的？

您的图片是使用绝对定位放置的。默认情况下，它相对于视口（window）起作用。但是通过将 body 变成相对位置，它变成了一个 containing block，而 position absolute 是相对于最近的 containing block 祖先。

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

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;
}

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

对于较小的屏幕，您可能希望在媒体查询中更改尺寸和定位，但它仍然应该可行（尽管取决于悬停状态在触摸设备上可能不是最好的主意）

我希望你明白了，并且你能想出如何将这种技术应用到你自己的网站上。随时询问您是否希望我进一步解释或当您遇到困难时。

如何将图像定位到 div 的左上角，并在 div 移动时将其保持在那里？

How do I position an image to the top left corner of a div, and keep it there if the div moves?

html

css

weebly