以前我所學到的關於定位問題僅僅知道absolute是絕對定位，它可以讓元素脫離標准流上浮，並且和float相比它可以讓元素重疊在一起，后面的元素覆蓋在前面的元素上。
relative是相對定位，它使元素固定在標准流上，並且占據一定的空間，不過和absolute一樣，relative的任何移動都不影響其他標准流的元素。absolute和relative最常用的做法是給父類
一個相對定位，給子類一個絕對定位，然后子類相對父類位置移動，比較容易控制元素在整個頁面的位置。不過通過今天的實驗我發現了一些新東西來和大家分享。
ps:我使用的是谷歌瀏覽器，對於其他瀏覽器是否存在問題沒有試驗，如果大家發現什么問題請告訴我。
1.倆個塊級元素（或倆個行級元素）都僅僅absolute,但是沒有設定left和top，它們會重疊在一起，然后后面的元素覆蓋前面的元素。
<!DOCTYPE html> <html> <head lang="en"> <meta charset="utf-8"/> <title></title> <script src="../js/jquery-1.10.2.js"></script> <script></script> <style> *{margin:0;padding:0;} div:nth-of-type(1){position:absolute;width:200px;height:200px;background-color: blue;} div:nth-of-type(2){position:absolute;width:200px;height:200px;background-color: red;} span:nth-of-type(1){position:absolute;width:200px;height:200px;background-color:blue;} span:nth-of-type(2){position:absolute;width:200px;height:200px;background-color: red;} </style> </head> <body> <div></div> <div></div> <span></span> <span></span> </body> </html>
2.一個塊級元素僅僅absolute,但是沒有設定left和top，而另一個塊級元素沒有定位，他們不會重疊。行級元素就好玩了，大家可能在上面就已經發現行級元素沒有內容，卻能撐開寬高，沒錯就是定位引起的，當我們把背景顏色為藍的行級元素的定位去掉，他將沒有辦法撐開寬高而消失，紅色的塊級元素和紅色的行級元素重疊，依舊是后壓前，藍色的塊級元素在最上面。
<!DOCTYPE html> <html> <head lang="en"> <meta charset="utf-8"/> <title></title> <script src="../js/jquery-1.10.2.js"></script> <script></script> <style> *{margin:0;padding:0;} div:nth-of-type(1){width:200px;height:200px;background-color: blue;} div:nth-of-type(2){position:absolute;width:200px;height:200px;background-color: red;} span:nth-of-type(1){width:200px;height:200px;background-color:blue;} span:nth-of-type(2){position:absolute;width:200px;height:200px;background-color: red;} </style> </head> <body> <div></div> <div></div> <span></span> <span></span> </body> </html>
3.將第二種情況變一下，給帶有absolute的元素加上left：0;top:0;這時候所有的圖片就全都重疊在一起了。
<!DOCTYPE html> <html> <head lang="en"> <meta charset="utf-8"/> <title></title> <script src="../js/jquery-1.10.2.js"></script> <script></script> <style> *{margin:0;padding:0;} div:nth-of-type(1){width:200px;height:200px;background-color: blue;} div:nth-of-type(2){position:absolute;left:0;top:0;width:200px;height:200px;background-color: red;} span:nth-of-type(1){width:200px;height:200px;background-color:blue;} span:nth-of-type(2){position:absolute;left:0;top:0;width:200px;height:200px;background-color: red;} </style> </head> <body> <div></div> <div></div> <span></span> <span></span> </body> </html>
4.之后我在想margin-left在定位之后是否能用，結果證明不但能用，還能和left一共用，效果是left和margin-left效果疊加，試驗中我將left和margin-left效果疊加成0，所以在左上角。
<!DOCTYPE html> <html> <head lang="en"> <meta charset="utf-8"/> <title></title> <script src="../js/jquery-1.10.2.js"></script> <script></script> <style> *{margin:0;padding:0;} div{position:absolute;left:200px;top:0;margin-left:-200px;width:200px;height:200px;background-color: blue;} span{position:absolute;left:0;top:200px;margin-top:-200px;width:200px;height:200px;background-color: red;} </style> </head> <body> <div></div> <span></span> </body> </html>
5.最后說一點很重要的東西——relative，書上定義的是relative：對象遵循常規流，並且參照自身在常規流中的位置通過top，right，bottom，left屬性進行偏移時不影響常規流中的任何元素。
很長時間我都認為有relative 屬性的元素在標准流定死的，不能覆蓋帶有absolute屬性的元素，也就是說無法用z-index，但是這個理解是錯誤的，我在解決一個無法用absolute解決的問題，(這個問題是absolute會讓元素重疊在一起，而relative不會)我試着用了一下relative，結果發現成功了，於是我找到z-index的適用情況明確包括relative，當relative元素和absolute元素的z-index的值相同時，absolute在上面。
<!DOCTYPE html> <html> <head lang="en"> <meta charset="utf-8"/> <title></title> <script src="../js/jquery-1.10.2.js"></script> <script></script> <style> *{margin:0;padding:0;} div:nth-of-type(2){position:absolute;left:0;top:0;width:200px;height:200px;background-color: red;z-index: 1;} div:nth-of-type(1){position:relative;width:200px;height:200px;background-color: blue;z-index:1;} </style> </head> <body> <div></div> <div></div> </body> </html>
