很多网站我们看到在屏幕右下角有一个，返回顶部，始终在那儿，还有些网站顶部菜单栏永远也是固定的不动，就是通过今天学习的position来做的。
在style中加入 positon:fixed;top 0;left 0;right 0;就是固定在顶部
<body>
<div onclick="Top();" style="height: 30px; 30px;background: #396764;color: white;
position: fixed;bottom: 0;right: 0;
margin-bottom: 20px;margin-right: 20px;
">top</div>
<div style="height: 3000px;background: #dddddd;">body</div>
<script>
function Top() {
document.documentElement.scrollTop = 0;
}
</script>
</body>
position 还有两个取值经常配合在一起用，relative,absolute.单独定义一个relative，是没有任何意义的，跟没定义一样。
relative放在父标签中，它的子标签中才用absolute。作用是子标签的位置是相对于父标签来说的
<div style=" 500px;height: 200px;border: 1px solid red;margin: 0 auto; position: relative;">
<div style="position: absolute;top: 0;left: 0; 30px;height: 30px;background: #000;"></div>
<div style="position: absolute;top: 0;right: 0; 30px;height: 30px;background: #000;"></div>
<div style=" 200px;height: 100px;border: 1px solid blue;margin: 0 auto;position: relative;">
<div style="position: absolute;top: 50px;left: 100px; 30px;height: 30px;background: #750e60;"></div>
</div>
</div>
<div style=" 500px;height: 200px;border: 1px solid red;margin: 0 auto; position: relative;">
<div style="position: absolute;bottom: -30px;right: -30px; 30px;height: 30px;background: #000;"></div>
</div>