版权声明：未经同意，严禁转载 https://blog.csdn.net/pengchengliu/article/details/88103544
| CSS的定位属性
什么叫定位？就是可以把div放到页面中的任何位置。前提是要计算好位置。 用到position属性，有两个属性值： absolute：将对象从文档流中拖出，可以使用left、right、top、bottom属性对其进行绝对定位。 relative ：对象不会从文档流中拖出来，可以使用left、right、top、bottom属性设置正常文档流中偏移位置。 一、position:absolute 例1:position:absolute的例子 //定位.html
| <html>
扫描二维码关注公众号，回复：
5418870 查看本文章
<head> <title>定位</title> <style type="text/css"> div{ width: 200px; height:100px; border: 2px solid blue; } #div1{ background-color:red; position:absolute; } #div2{ width:250px; height:100px; background-color:green; } #div3{ background-color:orange; } </style> </head> <body> <div id="div1">AAAAAAAAAAAAA</div> <div id="div2">BBBBBBBBBBBBBB</div> <div id="div3">CCCCCCCCCCCCCC</div> </body> </html> |
效果：div2跑到了 div1的后面。 
解释： div1,div2,div3本来是依次往下排列。将div1设置position:absolute后，就将div1拖出来了。 div1的位置空了，div2、div3就依次补齐。 div1在div2上面飘着。 例2：position:absolute的例子 //定位.html
| <html> <head> <title>定位</title> <style type="text/css"> div{ width: 200px; height:100px; border: 2px solid blue; } #div1{ background-color:red; position:absolute; top:50px; left:80px; } #div2{ width:250px; height:100px; background-color:green; } #div3{ background-color:orange; } </style> </head> <body> <div id="div1">AAAAAAAAAAAAA</div> <div id="div2">BBBBBBBBBBBBBB</div> <div id="div3">CCCCCCCCCCCCCC</div> </body> </html> |
效果： 
二、position:relative 例：position:relative //定位.html
| <html> <head> <title>定位</title> <style type="text/css"> div{ width: 200px; height:100px; border: 2px solid blue; } #div1{ background-color:red; } #div2{ background-color:green; position:relative; top:80px; left:120px; } #div3{ background-color:orange; } </style> </head> <body> <div id="div1">AAAAAAAAAAAAA</div> <div id="div2">BBBBBBBBBBBBBB</div> <div id="div3">CCCCCCCCCCCCCC</div> </body> </html> |
效果： 
解释： div2并不从文档中拖出来，所以div3不补齐。另外top,left是相对于原来的div2的位置的偏移。 |