丐帮资源网

关于CSS absolute与relative不得不说的话
站长资源 2024/12/27 佚名
2 0

写在开篇：

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

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

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

relative对absolute的限制之一

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

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

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

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

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

XML/HTML Code复制内容到剪贴板
  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 50px;   
  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.             .box2 p {   
  26.                 margin-left: 30px;   
  27.             }   
  28.   
  29.             .box img {   
  30.                 position: absolute;   
  31.                 left:0;   
  32.                 top:0;   
  33.             }   
  34.   
  35.             .box2 {   
  36.                 position: relative;   
  37.             }   
  38.   
  39.         </style>  
  40.     </head>  
  41.     <body>  
  42.         <div class="box box1">  
  43.             <img src="http://imgsrc.baidu.com/forum/w%3D580/sign=0c101fe665380cd7e61ea2e59145ad14/f9a3492762d0f7032de1758a08fa513d2797c542.jpg" alt="A picture" style="width:100px;height:150px" />  
  44.             <p>今天，absolute小朋友出去玩啦，开启left:0; top:0; 这个组合技能，一切顺利，到达了天边。</p>  
  45.         </div>  
  46.   
  47.         <div class="box box2">  
  48.             <img src="http://imgsrc.baidu.com/forum/w%3D580/sign=0c101fe665380cd7e61ea2e59145ad14/f9a3492762d0f7032de1758a08fa513d2797c542.jpg" alt="A picture" style="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在这里：

XML/HTML Code复制内容到剪贴板
  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:250px;   
  10.                 background-color: pink;   
  11.                 margin:50px auto 50px;   
  12.                 overflow: hidden;                   
  13.             }   
  14.   
  15.             .box p {   
  16.                 margin: 20px 30px 20px 120px;   
  17.                 text-align: left;   
  18.             }   
  19.   
  20.             .box img {   
  21.                 position: absolute;   
  22.                 margin-left:-30px;   
  23.                 margin-top: -45px;   
  24.             }   
  25.   
  26.             .box2 {   
  27.                 position: relative;   
  28.             }   
  29.   
  30.         </style>  
  31.     </head>  
  32.     <body>  
  33.         <div class="box box1">  
  34.             <img src="http://imgsrc.baidu.com/forum/w%3D580/sign=0c101fe665380cd7e61ea2e59145ad14/f9a3492762d0f7032de1758a08fa513d2797c542.jpg" alt="A picture" style="width:100px;height:150px" />  
  35.             <p>今天，absolute小朋友出去玩啦。</p>  
  36.             <p>鉴于上次用top、right、bottom、left技能的时候遇到了relative，导致出不去的尴尬，今天用的是margin负值技能。</p>  
  37.             <p>虽然房子周围设置了overflow:hidden，但这位强大的小朋友依然跑出去啦。</p>  
  38.         </div>  
  39.   
  40.         <div class="box box2">  
  41.             <img src="http://imgsrc.baidu.com/forum/w%3D580/sign=0c101fe665380cd7e61ea2e59145ad14/f9a3492762d0f7032de1758a08fa513d2797c542.jpg" alt="A picture" style="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小朋友那么可爱，不信你看：

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

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

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

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

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

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

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

来个例子，如下：

XML/HTML Code复制内容到剪贴板
  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>  

以上这篇关于CSS absolute与relative不得不说的话就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持。

原文地址：http://www.cnblogs.com/cc156676/archive/2016/07/20/5688949.html

广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
www.yaopr.com 丐帮资源网
39,976影音资源
44,792技术资源
21,817软件资源
651,128站长资源

更新日志

友情链接

杰晶网络 DDR爱好者之家 桃源资源网 杰网资源 富贵资源网 南强小屋 铁雪资源网 幽灵资源网 万梅资源网 狼山资源网 白云岛资源网 昆仑资源网 相思资源网 明霞山资源网 内蒙古资源网 黑松山资源网 茶园资源网 饿虎岗资源网 大旗谷资源网 常春岛资源网 岱庙资源网 兴国资源网 快活林资源网 蝙蝠岛资源网 帝王谷资源网 白云城资源网 伏龙阁资源网 清风细雨楼 天枫庄资源网 圆月山庄资源网 无争山庄资源网 神水资源网 移花宫资源网 神剑山庄资源网 无为清净楼资源网 金钱帮资源网 丐帮资源网 华山资源网 极乐门资源网 小李飞刀资源网 凤求凰客栈 风云阁资源网 金狮镖局 鸳鸯亭资源网 千金楼资源网 更多链接