1、css定位
2、定位機制：
普通流：元素按照其在HTML中的位置順序決定排布的過程
浮動
絕對佈局
3、css定位屬性
position：static relative absolute fixed
（1）position設置爲static
static屬性表示被修飾的div在父容器內按照普通流佈局，left，right等設置屬性值不會生效。
示例：
代碼部分：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>定位</title> <link rel="stylesheet" href="style.css" type="text/css"> <style type="text/css"> #position1{ width:100px; height:100px; background-color: #25ff32; position: static; left: 20px; top:20px; border: 1px solid blue; } #position2{ width:100px; height:100px; background-color: #2016ff; position: static; left: 10px; top:10px; border:1px solid green; } #body{ margin-left: 200px; margin-top: 200px; border:1px solid red; } </style> </head> <body> <div id="body"> <div id="position1"> </div> <div id="position2"> </div> </div> <script> for(var i=0;i<100;i++){ document.write(i+"<br/>") } </script> </body> </html>
（2）position設置爲relative時
相對定位是指相對於元素本身應該的位置（針對於父容器而言的）而發生的偏移量。
示例：
代碼部分：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>定位</title> <link rel="stylesheet" href="style.css" type="text/css"> <style type="text/css"> *{ margin:0px; } #position1{ width:100px; height:100px; /*background-color: #25ff32;*/ position: relative; border: 1px solid blue; left:10px; top:10px; } #position2{ width:100px; height:100px; /*background-color: #2016ff;*/ position: relative; border:1px solid green; left:20px; top:20px; } #position3{ width:100px; height:100px; /*background-color: #2016ff;*/ position: relative; border:1px solid #17ff26; } #body{ margin: 100px; border:1px solid red; } </style> </head> <body> <div id="body"> <div id="position1"> </div> <div id="position2"> </div> <div id="position3"> </div> </div> <script> for(var i=0;i<100;i++){ document.write(i+"<br/>") } </script> </body> </html>（3）position設置爲absolute
absolute表示元素浮動在頁面上，位置偏移量完全取決於left和top等的設置
效果圖：
代碼部分:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>定位</title> <link rel="stylesheet" href="style.css" type="text/css"> <style type="text/css"> *{ margin:0px; } #position1{ width:100px; height:100px; /*background-color: #25ff32;*/ position: absolute; border: 1px solid blue; left:10px; top:10px; } #position2{ width:100px; height:100px; /*background-color: #2016ff;*/ position: absolute; border:1px solid green; left:20px; top:20px; } #position3{ width:100px; height:100px; /*background-color: #2016ff;*/ position: absolute; left: 30px; top: 30px; border:1px solid #17ff26; } #body{ margin: 100px; border:1px solid red; } </style> </head> <body> <div id="position1"> </div> <div id="position2"> </div> <div id="position3"> </div> <script> for(var i=0;i<100;i++){ document.write(i+"<br/>") } </script> </body> </html>
（4）position設置爲fixed時
position爲fixed時，頁面浮動在頁面上，且是固定浮動在頁面上，不隨滾動條的滾動而滾動。
效果圖：
代碼部分：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>定位</title> <link rel="stylesheet" href="style.css" type="text/css"> <style type="text/css"> *{ margin:0px; } #position1{ width:100px; height:100px; /*background-color: #25ff32;*/ position: fixed; border: 1px solid blue; left:10px; top:10px; } #position2{ width:100px; height:100px; /*background-color: #2016ff;*/ position: fixed; border:1px solid green; left:20px; top:20px; } #position3{ width:100px; height:100px; /*background-color: #2016ff;*/ position: fixed; left: 30px; top: 30px; border:1px solid #17ff26; } </style> </head> <body> <div id="position1"> </div> <div id="position2"> </div> <div id="position3"> </div> <script> for(var i=0;i<100;i++){ document.write(i+"<br/>") } </script> </body> </html>