CSS——设置滚动条出现在body身上

先看代码：

<!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身上的滚动条怎么滑动，都不影响初始包含块，从而实现使用绝对定位模拟固定定位。