栏目分类:
子分类:
返回
名师互学网用户登录
快速导航关闭
当前搜索
当前分类
子分类
实用工具
热门搜索
名师互学网 > IT > 软件开发 > Web开发 > Html/CSS

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

Html/CSS 更新时间: 发布时间: IT归档 最新发布 模块sitemap 名妆网 法律咨询 聚返吧 英语巴士网 伯小乐 网商动力

写在开篇:

absolute说:“relative,我这辈子都不想看见你!”

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

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

relative对absolute的限制之一

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

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

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

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

额,还是写个demo吧,看这里:

XML/HTML Code复制内容到剪贴板
  1.   
  2.   
  3.       
  4.           
  5.         relative对absolute的限制1  
  6.           
  7.       
  8.       
  9.           
  10.             

      
  11.             

    今天,absolute小朋友出去玩啦,开启left:0; top:0; 这个组合技能,一切顺利,到达了天边。

      
  12.         
  
  •   
  •           
  •             

      
  •             

    今天,absolute小朋友又出去玩啦,同样开启left:0; top:0; 这个组合技能,但是天公不作美,出门就碰到relative这个坏家伙,于是止步于relative的地方。

      
  •         
  •   
  •       
  •   
  • relative对absolute的限制之二

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

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

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

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

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

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

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

    demo在这里:

    XML/HTML Code复制内容到剪贴板
    1.   
    2.   
    3.       
    4.           
    5.         relative对absolute的限制2  
    6.           
    7.       
    8.       
    9.           
    10.             

        
    11.             

      今天,absolute小朋友出去玩啦。

        
    12.             

      鉴于上次用top、right、bottom、left技能的时候遇到了relative,导致出不去的尴尬,今天用的是margin负值技能。

        
    13.             

      虽然房子周围设置了overflow:hidden,但这位强大的小朋友依然跑出去啦。

        
    14.         
      
  •   
  •           
  •             

      
  •             

    今天,absolute小朋友又出去玩啦,同样用的是margin负值技能。

      
  •             

    房子周围也是设置了overflow:hidden属性的,但是这位强大的小朋友依然跑出去啦。

      
  •             

    咦,什么情况,我房子外边的那部分身体呢?

      
  •             

    我擦嘞,relative你什么时候来的?

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

    请给absolute自由

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

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

    absolute小朋友那么可爱,不信你看:



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

    absolute说:“relative,我再也不想看见你了!”

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

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

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

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

    来个例子,如下:

    XML/HTML Code复制内容到剪贴板
    1.   
    2.   
    3.       
    4.           
    5.         relative影响最小化  
    6.           
    7.       
    8.       
    9.           
    10.               
    11.                 

        
    12.                 

        
    13.                 

        
    14.                 

        
    15.                 

      这是没有任何定位,正常流的样子。

        
    16.                 

      后续。。。

        
    17.               
    18.           
    19.           
    20.               
    21.                 

        
    22.                 

        
    23.                 

        
    24.                 

        
    25.                 

      如果我们要将图像定位到黑色边框的左上角,应该怎么办?

        
    26.                 

      很简单,绝对定位,不加任何偏移量,用margin微调,完成!

        
    27.               
    28.           
    29.           
    30.               
    31.                 

        
    32.                 

        
    33.                 

        
    34.                 

        
    35.                 

      如果我们要将图像定位到黑色边框的右上角,应该怎么办?

        
    36.                 

      第一种方法,像刚才那样,直接绝对定位,再用margin调整;   

    37.                 这种方法需要消耗一点脑细胞,算一算到底应该位移多少像素。

        
    38.               
    39.           
    40.           
    41.               
    42.                   
    43.                     

        
    44.                   
    45.                 

        
    46.                 

        
    47.                 

        
    48.                 

      第二种方法,就是大家喜闻乐见的relative+absolute定位啦。

        
    49.                 

      不过,看在absolute那么讨厌relative的面子上,relative就只欺负它一个就好了,千千万万不要影响到其它花花草草。

        
    50.                 

      具体来说,给这个需要定位的图像外加一层div,设置relative,让这个relative只影响需要绝对定位的元素。

        
    51.                 

      relative影响最小化!

        
    52.               
    53.           
    54.       
    55.   

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

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

    转载请注明:文章转载自 www.mshxw.com
    本文地址:https://www.mshxw.com/it/217789.html

    Html/CSS相关栏目本月热门文章

    我们一直用心在做
    关于我们 文章归档 网站地图 联系我们

    版权所有 (c)2021-2022 MSHXW.COM

    ICP备案号:晋ICP备2021003244-6号