Look at the code:
<!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>
When the overflow property body, html element occur simultaneously, a scroll bar appears on the body (body overflow value is set to Auto, overflow arbitrary html element)
If, body, html element has overflow only one attribute, scrollbars appear on the html level, namely the viewport
Look at an example, to set the scroll bar 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>
If you want to ban "viewport" scroll bar, html, body arbitrarily set a value of the overflow property to hidden.
Analog fixed positioning using absolute positioning
Look at an example:
<!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身上的滚动条怎么滑动，都不影响初始包含块，从而实现使用绝对定位模拟固定定位。