一.固定定位
固定定位是固定在浏览器的某一视框位置。
<style>
div{
height: 1000px;
}
#back{
width: 100px;
height: 60px;
text-align: center;
line-height: 60px;
background-color: #585858;
position: fixed;
bottom: 20px;
right: 20px;
/*显示的优先级*/
z-index: 1000;
}
</style>
解释：
position: fixed;相对于浏览器的窗口进行定位。z-index: 1000;显示的优先级，值越大越优先。但一般会有最大值限制。
<body>
<div>
<div id="back">
返回顶部
</div>
</div>
</body>二.相对定位采用相对定位的元素，会相对它原来的位置进行定位，发生偏移时，元素原始占用的空间不会被其他元素占用。<style> #left,#center,#right{ float: left; } #left{ width: 200px; height: 200px; background-color: #42668f; } #center{ width: 200px; height: 200px; background-color: #f2ad0a; position: relative; top: 20px; left: 20px; } #right{ width: 200px; height: 200px; background-color: aqua; }</style>解释：position: relative;用于相对定位。实例center模块偏移后距原来位置向下20px，向右20px.<body><div> <div id="left"></div> <div id="center"></div> <div id="right"></div></div></body>三.绝对定位采用绝对定位的元素，会寻找离它最近的采用了定位的父元素，并以它为坐标进行定位如果所有的父元素都没有使用定位，则以body为坐标进行定位，并且，元素占用的空间会被其他元素占用。<style> #left,#center,#right{ float: left; } #left{ width: 200px; height: 200px; background-color: #42668f; } #center{ width: 200px; height: 200px; background-color: #f2ad0a； position: absolute; top: 20px; left: 20px; } #right{ width: 200px; height: 200px; background-color: aqua; }</style>解释：
position: absolute;用于绝对定位。
<body><div>
<div id="left"></div>
<div id="center"></div>
<div id="right"></div>
</div>
</body>
解释：
position: absolute;用于绝对定位。
<body><div>
<div id="left"></div>
<div id="center"></div>
<div id="right"></div>
</div>
</body>
