先看代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
*{
margin: 0;
padding: 0;
}
html{
margin: 30px;
height: 80%;
border: 1px solid;
overflow: hidden;
}
body{
margin: 30px;
height: 80%;
border: 1px solid deeppink;
overflow: auto;
}
</style>
</head>
<body>
<div id="test" style="height: 3000px;">
</div>
</body>
</html>
当body，html元素同时出现overflow属性时，滚动条出现在body上(body的overflow值设置为auto，html元素的overflow值任意)
如果，body，html元素中只有一个有overflow属性，那么滚动条出现在html的上一级，即视口
再看一个例子， 给div设置滚动条
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
*{
margin: 0;
padding: 0;
}
html{
margin: 30px;
height: 80%;
border: 1px solid;
overflow: hidden;
}
body{
margin: 30px;
height: 80%;
border: 1px solid deeppink;
overflow: auto;
}
</style>
</head>
<body>
<div id="test" style="height: 3000px;">
</div>
</body>
</html>
如果要禁止 "视口" 的滚动条， html，body任意一个设置overflow属性值为hidden即可。
使用绝对定位模拟固定定位
先看一个例子：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
*{
margin: 0;
padding: 0;
}
html{
height: 100%;
}
body{
height: 100%;
}
#wrap{
300px;
height: 300px;
background-color: pink;
}
</style>
</head>
<body style="height: 3000px;">
<div id="wrap">
</div>
</body>
</html>
当body身上的的滚动条滚动时，初始包含块的位置发生改变，导致wrap块移动。
初始包含块： 是一个视窗大小的矩形。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
*{
margin: 0;
padding: 0;
}
html{
height: 100%;
overflow: hidden;
}
body{
height: 100%;
overflow: hidden;
}
#wrap{
height: 100%;
border: 1px solid deeppink;
overflow: auto;
}
#testFixed{
100px;
height: 100px;
position: absolute;
left: 0;
top: 0;
background-color: #FF1493;
}
</style>
</head>
<body>
<div id="wrap">
<div id="testFixed">
</div>
<div id="test" style="height: 3000px;">
</div>
</div>
</body>
</html>
初始包含块： 是一个视窗大小的矩形。
testFixed设置了position:absolute,相对初始包含块定位。无论div身上的滚动条怎么滑动，都不影响初始包含块，从而实现使用绝对定位模拟固定定位。