CSS中absolute与relative的限制有哪些

发布时间:2021-09-16 17:27:44 作者:柒染
来源:亿速云 阅读:137

这篇文章将为大家详细讲解有关CSS中absolute与relative的限制有哪些,文章内容质量较高,因此小编分享给大家做个参考,希望大家阅读完这篇文章后对相关知识有一定的了解。

relative对absolute的限制之一

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

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

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

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

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

XML/HTML Code复制内容到剪贴板

  1. <!DOCTYPE html>  
    <html>  
        <head>  
            <meta charset="utf-8">  
            <title>relative对absolute的限制1</title>  
            <style>  
                .box {   
                    width:500px;   
                    height:250px;   
                    background-color: pink;   
                    margin:30px auto 50px;   
                    line-height: 250px;   
                    text-align:center;   
                }   
      
                .box p {   
                    display: inline-block;   
                    vertical-align: middle;   
                    width:300px;   
                    font-size: 16px;   
                    line-height: 1.5;   
                    text-align: left;   
                }   
      
                .box2 p {   
                    margin-left: 30px;   
                }   
      
                .box img {   
                    position: absolute;   
                    left:0;   
                    top:0;   
                }   
      
                .box2 {   
                    position: relative;   
                }   
      
            </style>  
        </head>  
        <body>  
            <div class="box box1">  
                <img src="http://imgsrc.baidu.com/forum/w%3D580/sign=0c101fe665380cd7e61ea2e59145ad14/f9a3492762d0f7032de1758a08fa513d2797c542.jpg" alt="A picture" style="width:100px;height:150px" />  
                <p>今天,absolute小朋友出去玩啦,开启left:0; top:0; 这个组合技能,一切顺利,到达了天边。</p>  
            </div>  
      
            <div class="box box2">  
                <img src="http://imgsrc.baidu.com/forum/w%3D580/sign=0c101fe665380cd7e61ea2e59145ad14/f9a3492762d0f7032de1758a08fa513d2797c542.jpg" alt="A picture" style="width:100px;height:150px" />  
                <p>今天,absolute小朋友又出去玩啦,同样开启left:0; top:0; 这个组合技能,但是天公不作美,出门就碰到relative这个坏家伙,于是止步于relative的地方。</p>  
            </div>  
        </body>  
    </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>  
    <html>  
        <head>  
            <meta charset="utf-8">  
            <title>relative对absolute的限制2</title>  
            <style>  
                .box {   
                    width:500px;   
                    height:250px;   
                    background-color: pink;   
                    margin:50px auto 50px;   
                    overflow: hidden;                   
                }   
      
                .box p {   
                    margin: 20px 30px 20px 120px;   
                    text-align: left;   
                }   
      
                .box img {   
                    position: absolute;   
                    margin-left:-30px;   
                    margin-top: -45px;   
                }   
      
                .box2 {   
                    position: relative;   
                }   
      
            </style>  
        </head>  
        <body>  
            <div class="box box1">  
                <img src="http://imgsrc.baidu.com/forum/w%3D580/sign=0c101fe665380cd7e61ea2e59145ad14/f9a3492762d0f7032de1758a08fa513d2797c542.jpg" alt="A picture" style="width:100px;height:150px" />  
                <p>今天,absolute小朋友出去玩啦。</p>  
                <p>鉴于上次用top、right、bottom、left技能的时候遇到了relative,导致出不去的尴尬,今天用的是margin负值技能。</p>  
                <p>虽然房子周围设置了overflow:hidden,但这位强大的小朋友依然跑出去啦。</p>  
            </div>  
      
            <div class="box box2">  
                <img src="http://imgsrc.baidu.com/forum/w%3D580/sign=0c101fe665380cd7e61ea2e59145ad14/f9a3492762d0f7032de1758a08fa513d2797c542.jpg" alt="A picture" style="width:100px;height:150px" />  
                <p>今天,absolute小朋友又出去玩啦,同样用的是margin负值技能。</p>  
                <p>房子周围也是设置了overflow:hidden属性的,但是这位强大的小朋友依然跑出去啦。</p>  
                <p>咦,什么情况,我房子外边的那部分身体呢?</p>  
                <p>我擦嘞,relative你什么时候来的?</p>  
            </div>  
        </body>  
    </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复制内容到剪贴板

<!DOCTYPE html>  
<html>  
    <head>  
        <meta charset="utf-8">  
        <title>relative影响最小化</title>  
        <style>  
            * {   
                margin:0;   
            }   
  
            .wraper {   
                width:800px;   
                margin:50px auto;   
                background-color: #ccc;   
                border: 3px solid green;   
            }   
  
            .box {   
                width:500px;   
                margin:50px auto;   
                background-color: orange;   
                border: 3px solid black;   
            }   
  
            img {   
                border:1px solid blue;   
                margin:10px;   
            }   
  
            p {   
                padding-left:10px;   
                margin:10px;   
            }   
  
            .absolute {   
                position: absolute;   
            }   
  
            .box2 .absolute {   
                margin-left: -3px;   
                margin-top: -3px;   
            }   
  
            .box3 .absolute {   
                margin-top:-3px;   
                margin-left:450px;    
            }   
  
            .box4 .relative {   
                position: relative;   
                border:2px solid red;   
            }   
  
            .box4 .absolute {   
                top:-10px;   
                right:-10px;   
            }   
        </style>  
    </head>  
    <body>  
        <div class="wraper">  
            <div class="box box1">  
                <img src="http://image.tianjimedia.com/uploadImages/2012/237/4134F4528419.jpg" alt="A picture" style="width:50px;height:30px" />  
                <img src="http://imgsrc.baidu.com/forum/w%3D580/sign=0c101fe665380cd7e61ea2e59145ad14/f9a3492762d0f7032de1758a08fa513d2797c542.jpg" alt="A picture" style="width:100px;height:150px" />  
                <img src="http://imgsrc.baidu.com/forum/w%3D580/sign=0c101fe665380cd7e61ea2e59145ad14/f9a3492762d0f7032de1758a08fa513d2797c542.jpg" alt="A picture" style="width:100px;height:150px" />  
                <img src="http://imgsrc.baidu.com/forum/w%3D580/sign=0c101fe665380cd7e61ea2e59145ad14/f9a3492762d0f7032de1758a08fa513d2797c542.jpg" alt="A picture" style="width:100px;height:150px" />  
                <p>这是没有任何定位,正常流的样子。</p>  
                <p>后续。。。</p>  
            </div>  
        </div><!--关闭wraper-->  
        <div class="wraper">  
            <div class="box box2">  
                <img class="absolute" src="http://image.tianjimedia.com/uploadImages/2012/237/4134F4528419.jpg" alt="A picture" style="width:50px;height:30px" />  
                <img src="http://imgsrc.baidu.com/forum/w%3D580/sign=0c101fe665380cd7e61ea2e59145ad14/f9a3492762d0f7032de1758a08fa513d2797c542.jpg" alt="A picture" style="width:100px;height:150px" />  
                <img src="http://imgsrc.baidu.com/forum/w%3D580/sign=0c101fe665380cd7e61ea2e59145ad14/f9a3492762d0f7032de1758a08fa513d2797c542.jpg" alt="A picture" style="width:100px;height:150px" />  
                <img src="http://imgsrc.baidu.com/forum/w%3D580/sign=0c101fe665380cd7e61ea2e59145ad14/f9a3492762d0f7032de1758a08fa513d2797c542.jpg" alt="A picture" style="width:100px;height:150px" />  
                <p>如果我们要将图像定位到黑色边框的左上角,应该怎么办?</p>  
                <p>很简单,绝对定位,不加任何偏移量,用margin微调,完成!</p>  
            </div>  
        </div><!--关闭wraper-->  
        <div class="wraper">  
            <div class="box box3">  
                <img class="absolute" src="http://image.tianjimedia.com/uploadImages/2012/237/4134F4528419.jpg" alt="A picture" style="width:50px;height:30px" />  
                <img src="http://imgsrc.baidu.com/forum/w%3D580/sign=0c101fe665380cd7e61ea2e59145ad14/f9a3492762d0f7032de1758a08fa513d2797c542.jpg" alt="A picture" style="width:100px;height:150px" />  
                <img src="http://imgsrc.baidu.com/forum/w%3D580/sign=0c101fe665380cd7e61ea2e59145ad14/f9a3492762d0f7032de1758a08fa513d2797c542.jpg" alt="A picture" style="width:100px;height:150px" />  
                <img src="http://imgsrc.baidu.com/forum/w%3D580/sign=0c101fe665380cd7e61ea2e59145ad14/f9a3492762d0f7032de1758a08fa513d2797c542.jpg" alt="A picture" style="width:100px;height:150px" />  
                <p>如果我们要将图像定位到黑色边框的右上角,应该怎么办?</p>  
                <p>第一种方法,像刚才那样,直接绝对定位,再用margin调整;   
                这种方法需要消耗一点脑细胞,算一算到底应该位移多少像素。</p>  
            </div>  
        </div><!--关闭wraper-->  
        <div class="wraper">  
            <div class="box box4">  
                <div class="relative">  
                    <img class="absolute" src="http://image.tianjimedia.com/uploadImages/2012/237/4134F4528419.jpg" alt="A picture" style="width:50px;height:30px" />  
                </div>  
                <img src="http://imgsrc.baidu.com/forum/w%3D580/sign=0c101fe665380cd7e61ea2e59145ad14/f9a3492762d0f7032de1758a08fa513d2797c542.jpg" alt="A picture" style="width:100px;height:150px" />  
                <img src="http://imgsrc.baidu.com/forum/w%3D580/sign=0c101fe665380cd7e61ea2e59145ad14/f9a3492762d0f7032de1758a08fa513d2797c542.jpg" alt="A picture" style="width:100px;height:150px" />  
                <img src="http://imgsrc.baidu.com/forum/w%3D580/sign=0c101fe665380cd7e61ea2e59145ad14/f9a3492762d0f7032de1758a08fa513d2797c542.jpg" alt="A picture" style="width:100px;height:150px" />  
                <p>第二种方法,就是大家喜闻乐见的relative+absolute定位啦。</p>  
                <p>不过,看在absolute那么讨厌relative的面子上,relative就只欺负它一个就好了,千千万万不要影响到其它花花草草。</p>  
                <p>具体来说,给这个需要定位的图像外加一层div,设置relative,让这个relative只影响需要绝对定位的元素。</p>  
                <p>relative影响最小化!</p>  
            </div>  
        </div><!--关闭wraper-->  
    </body>  
</html>

关于CSS中absolute与relative的限制有哪些就分享到这里了,希望以上内容可以对大家有一定的帮助,可以学到更多知识。如果觉得文章不错,可以把它分享出去让更多的人看到。

推荐阅读:
  1. CSS 浅析position:relative/absolute定位方式
  2. CSS布局模型 之 层模型(position的relative、absolute与fixed区别?)

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

css absolute relative

上一篇:Mybatis延迟加载的概念

下一篇:Scala中集合的简单介绍

相关阅读

您好,登录后才能下订单哦!

密码登录
登录注册
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》