CSS absolute与relative不得不说的故事

写在开篇：

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

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

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

 

relative对absolute的限制之一

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

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

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

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

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

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8">
 5         <title>relative对absolute的限制1</title>
 6         <style>
 7             .box {
 8                 width:500px;
 9                 height:250px;
10                 background-color: pink;
11                 margin:30px auto 30px;
12                 line-height: 250px;
13                 text-align:center;
14             }
15 
16             .box p {
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             }
24 
25             p.middle {
26                 width: 500px;
27                 margin: 0 auto;
28             }
29 
30             .box2 p {
31                 margin-left: 30px;
32             }
33 
34             .box img {
35                 vertical-align: middle;
36                 transition:left 2s,top 2s;
37             }
38 
39             .box img:active {
40                 position: absolute;
41                 left:0;
42                 top:0;
43             }
44 
45             .box2 {
46                 position: relative;
47             }
48 
49         </style>
50     </head>
51     <body>
52         <div class="box box1">
53             <img src="http://imgsrc.baidu.com/forum/w%3D580/sign=0c101fe665380cd7e61ea2e59145ad14/f9a3492762d0f7032de1758a08fa513d2797c542.jpg" alt="A picture" style="width:100px;height:150px" />
54             <p>今天，absolute小朋友出去玩啦，开启left:0; top:0; 这个组合技能，一切顺利，到达了天边。</p>
55         </div>
56         <p class="middle">友情提示：请鼠标点击absolute小朋友，看看会发生什么。。。</p>
57         <div class="box box2">
58             <img src="http://imgsrc.baidu.com/forum/w%3D580/sign=0c101fe665380cd7e61ea2e59145ad14/f9a3492762d0f7032de1758a08fa513d2797c542.jpg" alt="A picture" style="width:100px;height:150px" />
59             <p>今天，absolute小朋友又出去玩啦，同样开启left:0; top:0; 这个组合技能，但是天公不作美，出门就碰到relative这个坏家伙，于是止步于relative的地方。</p>
60         </div>
61     </body>
62 </html>
View Code

 

relative对absolute的限制之二

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

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

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

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

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

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

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

demo在这里：

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8">
 5         <title>relative对absolute的限制2</title>
 6         <style>
 7             .box {
 8                 width:500px;
 9                 height: 350px;
10                 line-height: 350px;
11                 background-color: pink;
12                 margin:50px auto 50px;
13                 overflow: hidden; 
14                 text-align: center;               
15             }
16 
17             .box p {
18                 display: inline-block;
19                 vertical-align: middle;
20                 width:300px;
21                 font-size: 16px;
22                 line-height: 2;
23                 text-align: left;
24             }
25 
26             p.middle {
27                 width: 500px;
28                 margin: 0 auto;
29             }
30 
31             .box img {
32                 border: 1px solid black;
33                 vertical-align: middle;
34                 transition:margin-left 2s,margin-top 2s;
35             }
36 
37             .box img:active {
38                 position: absolute;
39                 margin-left:-120px;
40                 margin-top: -45px;
41             }
42 
43             .box2 {
44                 position: relative;
45             }
46 
47         </style>
48     </head>
49     <body>
50         <div class="box box1">
51             <img src="http://imgsrc.baidu.com/forum/w%3D580/sign=0c101fe665380cd7e61ea2e59145ad14/f9a3492762d0f7032de1758a08fa513d2797c542.jpg" alt="A picture" style="width:100px;height:150px" />
52             <p>今天，absolute小朋友出去玩啦。<br />
53             鉴于上次用top、right、bottom、left技能的时候遇到了relative，导致出不去的尴尬，今天用的是margin负值技能。<br />
54             虽然房子周围设置了overflow:hidden，但这位强大的小朋友依然跑出去啦。</p>
55         </div>
56         <p class="middle">友情提示，请鼠标点击absolute小伙伴，看看会发生什么。。。</p>
57         <div class="box box2">
58             <img src="http://imgsrc.baidu.com/forum/w%3D580/sign=0c101fe665380cd7e61ea2e59145ad14/f9a3492762d0f7032de1758a08fa513d2797c542.jpg" alt="A picture" style="width:100px;height:150px" />
59             <p>今天，absolute小朋友又出去玩啦，同样用的是margin负值技能。<br />
60             房子周围也是设置了overflow:hidden属性的，但是这位强大的小朋友依然跑出去啦。<br />
61             咦，什么情况，我房子外边的那部分身体呢？<br />
62             我擦嘞，relative你什么时候来的？</p>
63         </div>
64     </body>
65 </html>
View Code

 

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

 

请给absolute自由

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

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

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

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

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

 

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

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

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

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

来个例子，如下：

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

 

posted @ 2016-07-20 17:03  Aaron_Xiao  阅读(4042)  评论(1)  编辑  收藏  举报