Absolute模拟fixed

Ninefire 6月 07, 2018

absolute绝对定位，参照于包含块进行定位。
fixed固定定位，参照于视口进行定位。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>text</title>
    <style type="text/css">
        * { margin: 0; padding: 0; }

        html {
            overflow: hidden;
            height: 100%;
            }
        body {
            overflow: auto;
            height: 100%;
        }

        .test {
            position: absolute;
            width: 200px;
            height: 200px;
            margin: 100px;
            background: orange;
        }
    </style>
</head>
<body>
    <div class="test"></div>
    <div style="height: 10000px;">占位以撑开父元素从而出现滚动条</div>
</body>
</html>

戳我查看最终效果！<<

技术要点

视口（viewport）是指网页中你能看见的所有部分，不包括浏览器的菜单栏、工具栏、地址栏等。
当html和body仅指定其中之一的overflow属性时，overflow都作用于文档。
当html和body同时指定overflow属性时，html的overflow作用于文档，而body的overflow作用于body。
html的包含块是初始包含块（一个视口大小的矩形），当指定html的高度为100%时，html与视口的大小相同。
body的包含块是html，当指定body的高度为100%时，body与html的大小相同（即视口大小）。

总结

禁止系统滚动条
给body添加滚动条
设置body的尺寸为视口的尺寸

如发现错误请联系我，谢谢你。
本文链接：http://ninefire.tk/CSS2.1/03.html