先看代碼：
<!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{
width: 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{
width: 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身上的滾動條怎么滑動，都不影響初始包含塊，從而實現使用絕對定位模擬固定定位。