Question

所以我一直试图抓住绝对和相对定位的悬念。有很多关于这个主题的教程和问题，我已尽力理解它们。除了这一点，我最好还是很好。我正在创建一个页面，其中有较小的缩略图图像，用户可以选择单击并展开图像。为此，我只使用一个隐藏图层，其中包含仅在用户点击图像时才会显示的较大图像。我已经让这部分工作得很好。我的问题是，如果我在页面上向下滚动一些并单击图像，滚动条会在显示隐藏的div之前跳转到页面顶部。我的印象是，只有当你使用绝对定位时才会这样做（相对于窗口，而不是div锚）。它出现在我想要的地方，但它会跳到屏幕的顶部。我环顾四周，无法找到解决我确切问题的方法。提前谢谢。

HTML / CSS代码：

<a href="#" onclick="enlarge2()">
<img src="http://www.myadverket.com/images/smallemail.png" style="border: 2px solid  
#E0E0E0">
</a>
<div style="position: relative">
<div id="image2" style="position: absolute; top: 0px; right: 200px; width: 100%;  
height: 100%; vertical-align: middle; visibility: hidden">
....Content....
</div>
</div>

使用Javascript：

function enlarge2() {
var image = document.getElementById("image2");
image.style.visibility = "visible";
}

Answer 1

看到差异

<script>
    function test(){
        //onclick event stuff 
    }
</script>
<div style="height:3000px">a</div>
<a href="#" onclick="test(); return false;"> link1 <!-- will work as expected --> </a> 
<a href="#" onclick="test();">link2 <!--will scrollup --> </a>
<a id="cometome" href="#" onclick="test(); return false;"> link3 <!-- will not scroll --> </a>
<div style="height:3000px">b</div>
<a href="#cometome">scroll to link3!</a>
<a href="#">scroll to top!</a>

绝对/相对位置尝试强制滚动条到页面顶部

1 个答案: