浅谈块级元素和行级元素的相对定位和绝对定位问题
以前我所学到的关于定位问题仅仅知道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>
