一、引言：
在css眾多屬性中，position算是里面用的比較多也相對來說比較重要的屬性了，它對於單個標簽的“定位”、標簽之間的“相對位置定位”還有網頁的分層來說十分重要！
二、“定位的實現”具體介紹
position屬性下常用的有fixed、relative跟absolute方式，其中fixed是實現“固定在瀏覽器窗口的某個位置”的功能的；而relative單獨用沒有任何意義，絕大多數情況下都是relative+absolute聯合使用的：
2.1 fixed介紹：
2.1.1 我們在瀏覽網頁時，通常會看到不論網頁怎么上下滾動，右下角總有一個“固定”的“返回頂部”的標簽，這個標簽就是用fixed做的：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div style="width: 50px;height: 50px;background-color: #333333;color: #fafafa; position: fixed; bottom: 50px; right: 50px;">返回頂部</div> <div style="height: 5000px;background-color: grey"></div> </body> </html>
2.1.2 這里還有個例子，我們想實現“網頁的頭部不隨着鼠標滾動一直留在頂部”的效果，這在實際中用的也非常多，具體代碼實現如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .pg-top{ background-color: #333333; color:white; position:fixed; width:100%; height:22px; top:0; text-align: center; line-height:22px; } .pg-home{ background-color:grey; color:yellow; height: 3333px; margin-top:22px ; text-align: center; } </style> </head> <body> <div class="pg-top">我是頂部</div> <div class="pg-home"> <p>adasd</p> <p>adaaasd</p> <p>adcccasd</p> <p>adavvsd</p> <p>adaaasd</p> <p>adzzzasd</p> </div> </body> </html>
效果如下：
2.2 relative+absolute介紹
我們用這種模式絕大多數情況下是實現子類標簽相對於父類標簽的位置的，看下面的效果就明白了：
我們要實現上圖所示的效果，利用relative+absolute就可以了，實現代碼如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .site-main{ position: relative; border: 1px solid red; margin: 0 auto;/*使div居中*/ height:200px; width:500px; } .main-l{ position: absolute; left:0; bottom:0; width:50px; height:50px; background-color: yellow; border: 1px solid green; } .main-r{ position:absolute; right:0; bottom:0; width:66px; height:66px; background-color: aqua; border: 1px dashed orangered; } .main-m{ position: absolute; right:230px; bottom:0; width:66px; height:66px; background-color: fuchsia; border: 1px dashed sandybrown; } </style> </head> <body style="margin: 0 auto;"> <div class="site-main"> div1 <div class="main-l">div11</div> </div> <div class="site-main"> div2 <div class="main-r">div21</div> </div> <div class="site-main"> div3 <div class="main-m">div31</div> </div> </body> </html>
三、頁面分層介紹：
這里需要注意的是：我們寫的網頁如果不用position方法默認是在最底層，也就是第一層；如果利用position的fixed方法那么這個標簽其實放置在了頁面的第二層；如果再想在第二層上面放置一層的話，就要用到z-index了，z-index的值越大標簽就在越上層！這里需要與margin屬性配合使用進行定位：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .top{ z-index: 5;/*z-index的值誰大誰在上面*/ height: 255px; background-color: green; opacity:1;/*透明度*/ position: fixed; top:0; bottom:0; left: 0; right:0; } .top-top{ z-index: 10;/*z-index的值誰大誰在上面*/ height:155px; width: 155px; background-color: white; opacity:1;/*透明度*/ position: fixed; top:50px; left: 50%; margin-left: -100px; } </style> </head> <body style="margin:0 auto;"> <div class="top-top"></div> <div class="top"></div> <div style="height: 500px;background-color: grey;">dasdas</div> </body> </html>
效果如下：
最后需要注意的是：在具體開發時，我們一般都會默認使二三層隱藏（display:none），然后在一定的觸發條件下改變二、三層的display值達到相應的效果。