0

所以我一直在尝试掌握绝对定位和相对定位。关于这个主题有很多教程和问题，我已尽力理解它们。除了这一点，我大多都很好。我正在创建一个页面，其中有较小的缩略图图像，用户可以选择单击并展开图像。为此，我只使用了一个隐藏层，其中包含仅在用户单击图像时才会出现的较大图像。我已经让这部分工作得很好。我的问题是，如果我在页面上向下滚动并单击图像，滚动条会在显示隐藏的 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";
}
4

1 回答 1

0

看到不同

<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>
于 2013-04-24T23:43:57.750 回答