关于CSS absolute与relative不得不说的话

写在开篇：

absolute说：relative，我这辈子都不想看见你！

为什么呢？它们明明那么相亲相爱，形影不离，这之中到底发生了什么不为人知的故事，竟然让absolute如此讨厌relative？

要想找到问题的答案，请跟我来。。。

relative对absolute的限制之一

absolute，拥有top、right、bottom、left四项技能，从此天高任鸟飞，海阔任鱼跃；本来想去哪儿就去哪儿，自由自在，生活是那么地美好。

直到有一天，在出去玩的路上，遇到一个relative，跳出来大喊一声；此山是我开，此树是我栽，要从此路过，留下买路财！

然后，我们可爱哒absolute小朋友就乖乖地屈服了。

但是无良的relative收到好处居然还不放行，死活不让absolute过去。。。额，这个故事就是这样子的。。。相信大家都懂的。。。

额，还是写个demo吧，看这里：

1. !DOCTYPEhtml
2. html
3. head
4. metacharset=utf-8
5. titlerelative对absolute的限制1/title
6. style
7. .box{
8. width:500px;
9. height:250px;
10. background-color:pink;
11. margin:30pxauto50px;
12. line-height:250px;
13. text-align:center;
14. }
16. .boxp{
17. display:inline-block;
18. vertical-align:middle;
19. width:300px;
20. font-size:16px;
21. line-height:1.5;
22. text-align:left;
23. }
25. .box2p{
26. margin-left:30px;
27. }
29. .boximg{
30. position:absolute;
31. left:0;
32. top:0;
33. }
35. .box2{
36. position:relative;
37. }
39. /style
40. /head
41. body
42. divclass=boxbox1
43. imgsrc=http://imgsrc.*ba**idu.com/forum/w%3D580/sign=0c101fe665380cd7e61ea2e59145ad14/f9a3492762d0f7032de1758a08fa513d2797c542.jpgalt=Apicturestyle=width:100px;height:150px/
44. p今天，absolute小朋友出去玩啦，开启left:0;top:0;这个组合技能，一切顺利，到达了天边。/p
45. /div
47. divclass=boxbox2
48. imgsrc=http://imgsrc.*ba**idu.com/forum/w%3D580/sign=0c101fe665380cd7e61ea2e59145ad14/f9a3492762d0f7032de1758a08fa513d2797c542.jpgalt=Apicturestyle=width:100px;height:150px/
49. p今天，absolute小朋友又出去玩啦，同样开启left:0;top:0;这个组合技能，但是天公不作美，出门就碰到relative这个坏家伙，于是止步于relative的地方。/p
50. /div
51. /body
52. /html

relative对absolute的限制之二

上回说到，absolute小朋友用top、right、bottom、left四项技能出去玩的时候被relative半路给截住了。

这次absolute小伙伴吸取了教训，不用那四项技能了，用margin负值技能，一样能跑出去玩。

很好，虽然房子周围有overflow:hidden的魔法结界，但是我们的absolute小朋友直接无视之，从容通过，大家鼓掌！！！

但是，但是，但是那个无良的relative又来啦。

还好，还好，还好这次的是margin负值技能，absolute小朋友成功突破了relative的限制，跑出去啦。。。

额，好像有什么不对。。。

我跑出去那部分身体怎么不见啦？

demo在这里：

1. !DOCTYPEhtml
2. html
3. head
4. metacharset=utf-8
5. titlerelative对absolute的限制2/title
6. style
7. .box{
8. width:500px;
9. height:250px;
10. background-color:pink;
11. margin:50pxauto50px;
12. overflow:hidden;
13. }
15. .boxp{
16. margin:20px30px20px120px;
17. text-align:left;
18. }
20. .boximg{
21. position:absolute;
22. margin-left:-30px;
23. margin-top:-45px;
24. }
26. .box2{
27. position:relative;
28. }
30. /style
31. /head
32. body
33. divclass=boxbox1
34. imgsrc=http://imgsrc.*ba**idu.com/forum/w%3D580/sign=0c101fe665380cd7e61ea2e59145ad14/f9a3492762d0f7032de1758a08fa513d2797c542.jpgalt=Apicturestyle=width:100px;height:150px/
35. p今天，absolute小朋友出去玩啦。/p
36. p鉴于上次用top、right、bottom、left技能的时候遇到了relative，导致出不去的尴尬，今天用的是margin负值技能。/p
37. p虽然房子周围设置了overflow:hidden，但这位强大的小朋友依然跑出去啦。/p
38. /div
40. divclass=boxbox2
41. imgsrc=http://imgsrc.*ba**idu.com/forum/w%3D580/sign=0c101fe665380cd7e61ea2e59145ad14/f9a3492762d0f7032de1758a08fa513d2797c542.jpgalt=Apicturestyle=width:100px;height:150px/
42. p今天，absolute小朋友又出去玩啦，同样用的是margin负值技能。/p
43. p房子周围也是设置了overflow:hidden属性的，但是这位强大的小朋友依然跑出去啦。/p
44. p咦，什么情况，我房子外边的那部分身体呢？/p
45. p我擦嘞，relative你什么时候来的？/p
46. /div
47. /body
48. /html

经过这两次事件，absolute小朋友就开始讨厌relative小伙伴了，用一句耳熟能详的话来说就是，我再也不想看见你啦！

请给absolute自由

absolute小朋友天生就会飞，使用top、right、bottom、left想去哪儿就去哪儿。

absolute小朋友还会margin负值精确定位，想怎么玩就怎么玩。

absolute小朋友那么可爱，不信你看：

这么Q，这么萌，为什么要被限制住呢，宝宝向往天空和自由啊！啊！啊！啊！啊！

absolute说：relative，我再也不想看见你了！

但是，理想很丰满，现实很骨感。。。

absolute是不可能得偿所愿的，在定位的时候，或多或少都会使用relative来限制absolute，毕竟absolute实在太会飞了，不限制不行的啊。

不过，限制归限制，这只是relative和absolute两个人的恩怨，千万不要影响到其它花花草草。

所以，我们在使用relative+absolute定位的时候，要遵循relative影响最小化原则。

来个例子，如下：

1. !DOCTYPEhtml
2. html
3. head
4. metacharset=utf-8
5. titlerelative影响最小化/title
6. style
7. *{
8. margin:0;
9. }
11. .wraper{
12. width:800px;
13. margin:50pxauto;
14. background-color:#ccc;
15. border:3pxsolidgreen;
16. }
18. .box{
19. width:500px;
20. margin:50pxauto;
21. background-color:orange;
22. border:3pxsolidblack;
23. }
25. img{
26. border:1pxsolidblue;
27. margin:10px;
28. }
30. p{
31. padding-left:10px;
32. margin:10px;
33. }
35. .absolute{
36. position:absolute;
37. }
39. .box2.absolute{
40. margin-left:-3px;
41. margin-top:-3px;
42. }
44. .box3.absolute{
45. margin-top:-3px;
46. margin-left:450px;
47. }
49. .box4.relative{
50. position:relative;
51. border:2pxsolidred;
52. }
54. .box4.absolute{
55. top:-10px;
56. right:-10px;
57. }
58. /style
59. /head
60. body
61. divclass=wraper
62. divclass=boxbox1
63. imgsrc=http://image.tia**njimed*ia.com/uploadImages/2012/237/4134F4528419.jpgalt=Apicturestyle=width:50px;height:30px/
64. imgsrc=http://imgsrc.*ba**idu.com/forum/w%3D580/sign=0c101fe665380cd7e61ea2e59145ad14/f9a3492762d0f7032de1758a08fa513d2797c542.jpgalt=Apicturestyle=width:100px;height:150px/
65. imgsrc=http://imgsrc.*ba**idu.com/forum/w%3D580/sign=0c101fe665380cd7e61ea2e59145ad14/f9a3492762d0f7032de1758a08fa513d2797c542.jpgalt=Apicturestyle=width:100px;height:150px/
66. imgsrc=http://imgsrc.*ba**idu.com/forum/w%3D580/sign=0c101fe665380cd7e61ea2e59145ad14/f9a3492762d0f7032de1758a08fa513d2797c542.jpgalt=Apicturestyle=width:100px;height:150px/
67. p这是没有任何定位，正常流的样子。/p
68. p后续。。。/p
69. /div
70. /div!--关闭wraper--
71. divclass=wraper
72. divclass=boxbox2
73. imgclass=absolutesrc=http://image.tia**njimed*ia.com/uploadImages/2012/237/4134F4528419.jpgalt=Apicturestyle=width:50px;height:30px/
74. imgsrc=http://imgsrc.*ba**idu.com/forum/w%3D580/sign=0c101fe665380cd7e61ea2e59145ad14/f9a3492762d0f7032de1758a08fa513d2797c542.jpgalt=Apicturestyle=width:100px;height:150px/
75. imgsrc=http://imgsrc.*ba**idu.com/forum/w%3D580/sign=0c101fe665380cd7e61ea2e59145ad14/f9a3492762d0f7032de1758a08fa513d2797c542.jpgalt=Apicturestyle=width:100px;height:150px/
76. imgsrc=http://imgsrc.*ba**idu.com/forum/w%3D580/sign=0c101fe665380cd7e61ea2e59145ad14/f9a3492762d0f7032de1758a08fa513d2797c542.jpgalt=Apicturestyle=width:100px;height:150px/
77. p如果我们要将图像定位到黑色边框的左上角，应该怎么办？/p
78. p很简单，绝对定位，不加任何偏移量，用margin微调，完成！/p
79. /div
80. /div!--关闭wraper--
81. divclass=wraper
82. divclass=boxbox3
83. imgclass=absolutesrc=http://image.tia**njimed*ia.com/uploadImages/2012/237/4134F4528419.jpgalt=Apicturestyle=width:50px;height:30px/
84. imgsrc=http://imgsrc.*ba**idu.com/forum/w%3D580/sign=0c101fe665380cd7e61ea2e59145ad14/f9a3492762d0f7032de1758a08fa513d2797c542.jpgalt=Apicturestyle=width:100px;height:150px/
85. imgsrc=http://imgsrc.*ba**idu.com/forum/w%3D580/sign=0c101fe665380cd7e61ea2e59145ad14/f9a3492762d0f7032de1758a08fa513d2797c542.jpgalt=Apicturestyle=width:100px;height:150px/
86. imgsrc=http://imgsrc.*ba**idu.com/forum/w%3D580/sign=0c101fe665380cd7e61ea2e59145ad14/f9a3492762d0f7032de1758a08fa513d2797c542.jpgalt=Apicturestyle=width:100px;height:150px/
87. p如果我们要将图像定位到黑色边框的右上角，应该怎么办？/p
88. p第一种方法，像刚才那样，直接绝对定位，再用margin调整；
89. 这种方法需要消耗一点脑细胞，算一算到底应该位移多少像素。/p
90. /div
91. /div!--关闭wraper--
92. divclass=wraper
93. divclass=boxbox4
94. divclass=relative
95. imgclass=absolutesrc=http://image.tia**njimed*ia.com/uploadImages/2012/237/4134F4528419.jpgalt=Apicturestyle=width:50px;height:30px/
96. /div
97. imgsrc=http://imgsrc.*ba**idu.com/forum/w%3D580/sign=0c101fe665380cd7e61ea2e59145ad14/f9a3492762d0f7032de1758a08fa513d2797c542.jpgalt=Apicturestyle=width:100px;height:150px/
98. imgsrc=http://imgsrc.*ba**idu.com/forum/w%3D580/sign=0c101fe665380cd7e61ea2e59145ad14/f9a3492762d0f7032de1758a08fa513d2797c542.jpgalt=Apicturestyle=width:100px;height:150px/
99. imgsrc=http://imgsrc.*ba**idu.com/forum/w%3D580/sign=0c101fe665380cd7e61ea2e59145ad14/f9a3492762d0f7032de1758a08fa513d2797c542.jpgalt=Apicturestyle=width:100px;height:150px/
100. p第二种方法，就是大家喜闻乐见的relative+absolute定位啦。/p
101. p不过，看在absolute那么讨厌relative的面子上，relative就只欺负它一个就好了，千千万万不要影响到其它花花草草。/p
102. p具体来说，给这个需要定位的图像外加一层div，设置relative，让这个relative只影响需要绝对定位的元素。/p
103. prelative影响最小化！/p
104. /div
105. /div!--关闭wraper--
106. /body
107. /html