4.绝对定位(absolute)
1.在没有父元素或者父元素没有定位，绝对定位相对于当前屏幕的左上角。随着滚动条，离开当前屏幕，绝对定位就会失效。
先上效果
chrome-浏览器-显示效果：
HTML代码：
<body>
<!-- 父元素没有定位的情况 -->
<div class="box">
<div>块级元素：div1</div>
<div class="div2">块级元素：div2</div>
<div>块级元素：div3</div>
</div>
<!-- 没有父元素的情况 -->
<div class="div4">块级元素：div4</div>
<div class="div5">块级元素：div5</div>
<div class="div6">块级元素：div6</div>
</body>
CSS代码：
.box{
height:500px;
background-color:yellow;
}
.box div{
width:200px;
height:200px;
background-color:orange;
margin-top:20px;
}
.div2{
position:absolute;
top:100px;
left:240px;
}
.div3,.div4,.div5{
width:200px;
height:200px;
background-color:orange;
margin-top:20px;
}
.div4{
position:absolute;
top:120px;
left:240px;
background-color:rgba(0, 217, 255, 0.9);
}
总结：div1.div2和div3演示父元素没有定位的情况。div4，div5和div6演示在没有父元素的情况。注意观察div2和div5的位置变化，可以了解到绝对定位始终相对于当前屏幕的左上角，并且脱离了文档流，且没有保留改变之前的位置，造成下面的元素自动补上。
2.父元素有定位时，绝对定位相对于父元素的左上角。
chrome浏览器-显示效果：
HTML代码：
<body>
<!-- 父元素相对定位 -->
<div class="box">
<div>块级元素：div1</div>
<div class="div2">块级元素：div2</div>
<div>块级元素：div3</div>
</div>
</body>
CSS代码：
.box{
width:600px;
height:500px;
background-color:yellow;
position:relative;
margin:10px auto;
}
.box div{
width:200px;
height:200px;
background-color:orange;
margin-top:20px;
}
.div2{
position:absolute;
top:100px;
left:240px;
}
总结：观察输出效果，我先把整个父元素进行屏幕居中，还为父元素添加相对定位。而div2改变的位置并不是再次相对于屏幕左上角而是父元素的左上角。并且div3补上了原先div2的位置。
5.固定定位(fixed)
固定定位，顾名思义就是设置后，该元素始终固定在指定位置上，不在随着页面的滚动而移动。
chrome浏览器-显示效果：
变化前：
变化后：
HTML代码：
<body>
<!-- 父元素相对定位 -->
<div class="box">
<!-- 设置为固定定位 -->
<div class="div1">块级元素：div1</div>
<div class="div2">块级元素：div2</div>
</div>
</body>
CSS代码：
.box{
width:600px;
height:20000px;
background-color:yellow;
/* position:relative; */
margin:0 auto;
}
.box .div1{
width:200px;
height:200px;
background-color:orange;
position:fixed;
top:100px;
}
.box .div2{
width:200px;
height:200px;
background-color:orange;
}
总结;注意观察前后变化，以及滚动条所在的位置。我们可以得出如下结论 ，固定定位相对于父元素，在屏幕上固定不变。并且脱离文档流的。
6.粘性定位(sticky)
粘性定位：来源于CSS3，对于之前的版本它属于新技术。所以相对的较低版本的浏览器存在兼容问题。
chrome浏览器-显示效果：
变化前：
变化中：
变化后：
HTML代码：
<body>
<!-- 父元素相对定位 -->
<div class="box">
<!-- 设置为粘性定位 -->
<div class="div1">块级元素：div1</div>
<div class="div2">块级元素：div2</div>
<div class="div1">块级元素：div3</div>
</div>
</body>
CSS代码：
.box{
width:600px;
height:20000px;
background-color:yellow;
position:relative;
margin:0 auto;
}
.box .div1{
width:200px;
height:200px;
background-color:orange;
}
.box .div2{
width:200px;
height:200px;
background-color:red;
position:sticky;
top:0px;
}
总结：还是先观察，找出相似以及不同之处。粘性定位和固定定位很相似，只是粘性定位不脱离文档流。在没有到达指定位置之前，它和静态定位一样，随着页面滚动而滚动。到达指定位置后，固定不在滚动。
补充：图层显示(z-index)
随着三D效果的出现，页面不仅存在X轴，Y轴还有Z轴。z-index：要解决的问题是，在多个元素重叠，该让哪一个元素显示在最外层。
默认x-index效果：
改变后：
HTML代码：
<body>
<!-- 父元素相对定位 -->
<div class="box">
<!-- 设置为粘性定位 -->
<div class="div1">块级元素：div1</div>
<div class="div2">块级元素：div2</div>
<div class="div3">块级元素：div3</div>
<div class="div4">块级元素：div4</div>
</div>
</body>
CSS代码：
.box{
width:600px;
height:20000px;
background-color:yellow;
position:relative;
margin:0 auto;
}
.box .div1{
width:200px;
height:200px;
background-color:orange;
position:fixed;
top:10px;
z-index:4;
}
.box .div2{
width:200px;
height:200px;
background-color:red;
position:fixed;
top:40px;
z-index:3;
}
.box .div3{
width:200px;
height:200px;
background-color:rgb(247, 243, 243);
position:fixed;
top:60px;
z-index:2;
}
.box .div4{
width:200px;
height:200px;
background-color:rgb(81, 11, 243);
position:fixed;
top:80px;
z-index:1;
}
总结：z-index,没有单位，并存在负值。默认情况下最后写的优先显示在最上层。设置后，数值越大，显示越靠上。