如何将绝对定位的img放在页面顶部？

Question

我已经建立了jsfiddle。这是我的第一个，所以我不确定它是否正确，但我的小例子中的所有代码都在那里。我跑的时候没什么变化的。在我的机器上，调用了单击处理程序，但我看不到视口位置的变化。这就是问题，我希望图像移动到视口的顶部。

希望这是一个更好的问题。

我原来的问题如下：

我有一个相对定位的div包含一些绝对的imgs。我希望这种排列出现在视口的顶部。我相信如果我可以将div的顶部（位置：相对）设置到视口的顶部，它包含的图像将会出现。

问题是，我无法弄清楚如何做到这一点。相对div位于页面的底部，当我点击它时，我希望文档重新定位，以便它显示在顶部及其内容。我已经尝试过使用大的正数和负数的scrollTop，我无法让div重新定位。

我一直在尝试这样的事情：

$(#view2").scrollTop(xxx);

没有运气。

我的html如下所示。除＃view2之外的所有内容都是绝对的，＃view2是相对的。 ＃view1的内容是动态设置的。

<div id="view2">
    <img>
    <img>
        <div id="view1" ></div>
    <img>
    <img>
</div>

Answer 1

如果您只想让容器元素位于页面顶部，请使用：

#view2 {
    position:fixed;
    top:0;
    left:0;
    width:100%;
    box-sizing:border-box;
    padding:10px;
}

只是一个例子 - 很明显，如果你不需要填充等，只需删除它们，上面只是固定标题的典型用法。

Answer 2

由于您没有提供更多信息，因此很难分析您的问题：

但是像这样使用scrollTop：

$('html, body').animate({
    scrollTop: elementToScrollTo.offset().top
},200);

位置绝对容器的父元素必须具有位置相对。

正如我所说，如果没有你的正确代码片段，很难回答