其實position的值有四個，static/relative/absolute/fixed，而static是默認值，不算具有有定位屬性，這里就不講了。
定位其實就是跟元素設置定位屬性，然后設置其對位的相對上下左右的距離，一般寫法如下：
position:absolute;
top:20px;
left:20px;
下面我們分情況討論：
1、父級沒有定位屬性的情況，用relative和abosolute配合使用，解決一般的定位問題。
abosolute：絕對定位，其意義是相對其最近的一個有定位屬性的父級元素進行定位。
如果我們期望用於定位的父級沒有定位屬性，那么就可以給此父級加上position:relative屬性，這樣就能相對這個父級去定位了（原因不細講了，照寫就ok）。實例代碼如下：
讓類名div01相對於div03去定位
1 <div class="div03"> 2 <div class="div02"> 3 <div class="div01">藍色</div> 4 </div> 5 </div> 6 7 <style> 8 .div03{ height:500px; width:300px; padding:50px; background:#f0f0f0; position:relative;} 9 .div02{ height:300px; width:200px; background:#dddddd;} 10 .div01{ height:100px; width:200px; background:#3498db; position:absolute; top:20px; left:20px;} 11 </style>
定位效果如下圖：
2、父級有定位屬性的情況。
如果我們期望用於定位的父級已經有position或者abosolute定位屬性，那么就直接按第（1）中情況那樣想寫需要定位元素的定位就可以啦，它就會相對於那個有定位屬性的父級去定位。
3、position:relative；
此屬性表示元素相對於自己去定位，如果我需要將元素相對自己往上移動10像素，而又不影響周圍其他元素的位置，則可以向如下這樣寫樣式：
position:relative;
top:-10px;
left:0px;
此屬性設置時，在頁面或頁面內部有滾動條的時候，有可能會影響頁面寬度以及overflow:hidden的效果，不建議使用，我是一般都不用，可以用margin/padding、或者position:absolute解決，就不要用relaive去解決;
4：positon:fixed;
這個是相對於整個頁面框架去定義定位，你可以簡單的理解為相對於可視區去定位，一般頁面上飄來飄去的，或者浮動在頂部或右下角的小模塊都是用的fixed;
示例：
position:fixed;
bottom:0px;
left:0px;
這就是相對於頁面浮動在最下面，如下圖這個效果
fixed的一個使用技巧：
有時候自己寫模態框彈層的時候，需要加一個始終覆蓋的半透明的背景層，這個給一個div標簽可以設置以下樣式即可
background:#000;
position:fixed;
top:0px;
left:0px;
bottom:0px;
right:0px;
opacity:.7;
filter:alpha(opacity=70);
而中間彈窗定位也用fixed,但其top和left的值，最好使用js去更具具體頁面高寬來計算具體的值才能很好的居中。
5、z-index
所有的定位都是脫離了原來的文檔層，就像一本書，以前所有類容都在同一頁，而position之后，就可以放在不同層級的各頁，z-index值越高，就在越上層，默認值相當於0; 用法如下
position:absolute;
top:20px;
left:20px;
z-index:999;
就介紹這么多，看到別人網站的定位效果，而自己有不會寫，可以F12打開開發工具，就能看到別人的html代碼結構和css樣式了。