一个完整的页面是由很多个页面堆积形成的，如下图所示。
那么如何实现页面的堆积，就需要CSS中position的定位属性了。
position 属性指定了元素的定位类型，共有五个值，分别是
点击上述五个值可直接跳转到菜鸟教程的CSS Position (定位)篇章。
这里，我只重点说 absolute、fixed、relative 三个值。
1.absolute
absolute 绝对定位的元素的位置相对于最近的已定位父元素，如果元素没有已定位的父元素，那么它的位置相对于<html>。
absolute 定位使元素的位置与文档流无关，因此不占据空间。
absolute 定位的元素和其他元素重叠。
2. fixed
fixed元素的位置相对于浏览器窗口是固定位置。即使窗口是滚动的它也不会移动。
fixed 定位使元素的位置与文档流无关，因此不占据空间。
fixed 定位的元素和其他元素重叠。
我们可以发现 fixed 与 absolute 只是 相对位置 不同。
3.relative
relative相对定位元素的定位是相对其正常位置。
移动相对定位元素，但它原本所占的空间不会改变。
相对定位元素经常被用来作为绝对定位元素的容器块。
4.sticky
参看实例：http://www.runoob.com/try/try.php?filename=trycss_position_sticky 就会一清二楚。
5.static
HTML 元素的默认值，即没有定位，遵循正常的文档流对象。
静态定位的元素不会受到 top, bottom, left, right 影响。
其他四个值则都受 top, bottom, left, right 影响。
实战
我单独写了页面来展示position的 absolute、fixed、relative 三个值，注释写的也很清晰，大家细细看吧，我就不啰嗦了。
我后来又重新写了一份代码来解释，那个理解起来应该更清晰些，博客地址：https://blog.csdn.net/Dora_5537/article/details/88317408
vue框架下的完整代码如下所示：
<template>
<div class="absolute">
<div class="absolute1"><h2 style="padding-left: 20px">absolute1: 第二层</h2></div>
<div class="absolute2"><h2 style="padding-left: 20px">absolute2: 第三层</h2></div>
<div class="fixed"><h2 style="padding-top: 100px;text-align: center">fixed：第四层</h2></div>
<h2 style="padding-left: 20px">absolute: 第一层 ( 这部分的位置按文档流是在 class="relative" 的区域块上面，被遮挡了，看不到。) </h2>
<div class="relative">
<div class="absolute3"><h2 style="padding-left: 20px">absolute3：第六层</h2></div>
<div class="absolute4">
<h2 style="padding-left: 20px">absolute4：第七层</h2>
<div class="fixed1"><h2 style="padding-top: 100px;text-align: center">fixed1：第八层</h2></div>
</div>
<!--padding-top:30%是指父元素宽度的30%-->
<h2 style="padding-left: 20px;padding-top: 30%">relative：第五层</h2>
</div>
<h2 style="padding-left: 20px">absolute: 第一层 ( 这部分的位置按文档流是在 class="relative" 的区域块下面，被遮挡了，看不到。) </h2>
</div>
</template>
<script>
export default {
name: 'position'
}
</script>
<style scoped>
/* absolute 绝对定位的元素的位置相对于最近的已定位父元素，如果元素没有已定位的父元素，那么它的位置相对于<html>。
absolute 定位使元素的位置与文档流无关，因此不占据空间。
absolute 定位的元素和其他元素重叠。*/
/* 父元素为<html> */
.absolute{
position: absolute;
width: 100%;
height: 100%;
overflow: hidden;
}
/* 父元素为<div class="absolute"> */
.absolute1{
position:absolute;
width: 100%;
height: 500px;
background: #7fffd4;
}
/* 父元素为<div class="absolute"> */
.absolute2{
position:absolute;
width: 100%;
bottom: 0;
background: #47c1ff;
top: 500px;
}
/* fixed 元素的位置相对于浏览器窗口是固定位置。即使窗口是滚动的它也不会移动。
fixed 定位使元素的位置与文档流无关，因此不占据空间。
fixed 定位的元素和其他元素重叠。*/
.fixed{
position:fixed;
top:700px;
left:100px;
width: 500px;
height: 260px;
background: #ff2c2c;
}
/* relative 相对定位元素的定位是相对其正常位置。
移动相对定位元素，但它原本所占的空间不会改变。
相对定位元素经常被用来作为绝对定位元素的容器块。*/
/* 父元素为<div class="absolute"> */
.relative{
position: relative;
width: 1440px;
/* height: 50%是指父元素高度的50% */
height: 50%;
background: #ffffff;
margin: 170px auto;
}
/* 父元素为<div class="relative"> */
.absolute3{
position:absolute;
/* width: 100%是指父元素宽度的100% */
width: 100%;
height: 200px;
background: #fcff2e;
}
/* 父元素为<div class="relative"> */
.absolute4{
position:absolute;
/* width: 50%是指父元素宽度的50% */
width: 50%;
/* height: 50%是指父元素高度的50% */
height: 50%;
background: #77ff74;
/* 父元素宽度的25% */
left:25%;
/* 父元素高度的25% */
top:25%;
}
.fixed1{
position:fixed;
top:700px;
right:100px;
width: 500px;
height: 260px;
background: #ff2c2c;
}
</style>
实际页面共有八层，如下图所示：
注意:
每一层页面上显示的文字与上述代码是一一对应的。
每一页面的大小和位置是不一样的，这是自己设置的，上一层页面对下一层页面的覆盖程度也是不一样的，如：
- 第二层和第三层完全覆盖了第一层；
- 第二层和第三层彼此不覆盖；
- 第四层只覆盖了第三层它本身的大小；
- 第五层只覆盖了第四层一个小角。
等。
END