原理:当一个元素设置了position绝对定位,而且其祖先元素都没有设置定位,那这
个定位的参照点就是html。当body和html都设置了overflow属性后,body的overflow
会生效在自身上(就是滚动条),html的verflow会生效在document上,而html设置
overflow:hide,就是禁止了自己的滚动条,body设置overflow:auto,那出现的滚动条
就是body上的,你拖动滚动条的时候就是拖动body,html并没有发生位置变化,那以
html为参照物设置绝对定位的元素自然也不会发生位置变化,所以就达到了绝对定位
模拟固定定位的效果。
<style>
html,
body {
height: 100%;
overflow: hidden;
}
html #wrapper,
body #wrapper {
height: 100%;
/* 控制#wrapper显示滚动条 */
overflow: auto;
}
html #wrapper .head,
body #wrapper .head {
/* 其父元素#wrapper相对于body定位,由于body禁止滚动条显示,所以.head也不会随着滚动条滚动 */
position: absolute;
width: 100%;
height: 100px;
background-color: pink;
}
</style>
<body>
<div id="wrapper">
<div class="head"></div>
</div>
</body>
<script>
(() => {
for (var i = 0; i < 100; i++) {
wrapper.innerHTML += "xxx<br>";
}
})()
</script>