一.固定定位
固定定位是固定在浏览器的某一视框位置。
<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>
