首先看一个示例：

结构：

<div class="static">默认定位 　　<div class="relative">相对定位 　　　　<div class="absolute">绝对定位</div> 　　　　<div class="fixed">固定定位</div> 　　</div> </div>

样式：

*{padding: 0;margin: 0;} .static{width:300px;height: 300px;} .relative{margin:50px 50px;width: 200px;height: 200px;position: relative;top: 50px;} .absolute{position: absolute;top: 0;left: 0;width: 100px;height: 100px;} .fixed{position: fixed;top: 0;left: 0;width: 100px;height: 100px;}

效果图：

总结！

通过设置元素垂直和水平的位置，可以使得：

一.相对定位：元素“相对于”它的起点移动。图上的元素即相对于起点向下移动了50px。它占据着原有的空间。

二.绝对定位：元素“相对于”它的父元素移动（或者是离它最近的已定位的祖先元素移动）。图上元素的左上角坐标和它的父元素重合。它不占据空间。

三.固定定位：元素“相对于”视口移动。图上元素移动到坐标（0,0）的位置。它不占据空间。

 

 

转载于:https://www.cnblogs.com/jinxiangli/p/5910770.html