浏览器默认的视窗会随着滚动条滚动,绝对定位的元素会随着滚动条滚动,为了解决这个问题我们需要禁止浏览器的滚动条,然后在代码的最外层初始化一个 div(最外层包含容容器代替默认的视窗),是滚动天出现在最外层容器上,从而解决决定定位的元素滚动的问题。CSS 代码如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
*{
margin: 0;
padding: 0px;
}
html,body{
height:100%;
overflow: hidden;
}
#wrapper{
height:100%;
overflow: auto;
}
</style>
</head>
<body>
<div id="wrapper">
<div style="height: 200px; 200px;background-color: pink;position:absolute; left: 20px;top:20px;"></div>
<div style="height: 2000px;"></div>
</div>
</body>
</html>