相对定位：

head：

<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
    header{
        border: 2px solid #ca9157;
        height: 100px;
        width: 400px;
    }
    section{
        border: 2px solid #FF0000;
        height: 200px;
        width: 200px;
    }
    footer{
        border: 2px solid #0000FF;
        height: 400px;
        width: 100px;
    }
</style>

body：

<header>
    <h1>相对定位</h1>
</header>
<section>
    <p>相对定位是相对于当前应在位置进行偏移，偏移后原位置进行了保留。</p>
</section>
<footer>
    <p>&copy;版权所有</p>
</footer>

绝对定位：

head：

<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
    header{
        border: 2px solid #ca9157;
        height: 100px;
        width: 400px;
    }
    section{
        border: 2px solid #FF0000;
        height: 200px;
        width: 200px;
        position: absolute;
        top: 30px;
        left: 40px;
    }
    footer{
        border: 2px solid #0000FF;
        height: 400px;
        width: 100px;
    }
</style>

body：

<header>
    <h1>绝对定位</h1>
</header>
<section>
    <p>绝对定位是相对于最近的一个已经定位的祖先元素进行定位，如果没有定位的祖先元素，则相对于最初的包含块。偏移后原位置不再保留</p>
</section>
<footer>
    <p>&copy;版权所有</p>
</footer>

固定定位：

head：

<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
    body{
        height: 1000px;
    }
    header{
        border: 2px solid #ca9157;
        height: 400px;
        width: 400px;
    }
    section{
        border: 2px solid #FF0000;
        height: 200px;
        width: 200px;
        position: fixed;
        top: 30px;
        left: 40px;
    }
    footer{
        border: 2px solid #0000FF;
        height: 400px;
        width: 400px;
    }
</style>

body：

<header>
    <h1>固定定位</h1>
</header>
<section>
    <p>固定定位是相对于浏览器窗口进行定位，不管页面中文档内容如何滚动，盒子位置始终相对于浏览器窗口展示。原位置不再保留</p>
</section>
<footer>
    <p>&copy;版权所有</p>
</footer>

堆叠：

head：

<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
    div{
        width: 300px;
        height: 200px;
        position: absolute;
    }
    .div1{
        background-color:hotpink;
        z-index: 2;
        opacity: 0.5;
    }
    .div2{
        background-color: yellow;
        z-index: 1;
        top: 50px;
        left: 100px;
        opacity: 0.5;
        
    }
    .div3{
        background-color: red;
        z-index: 0;
        top: 100px;
        left: 200px;
    }
</style>

body：

<div class="div1">第一个div</div>
<div class="div2">第二个div</div>
<div class="div3">第三个div</div>