CSS深入理解之relative定位

5,502 阅读7分钟
原文链接: web.jobbole.com

1.前言

在前面的两篇文章:CSS深入理解之float浮动CSS深入理解之absolute定位中,介绍了floatabsolute的特性和使用方法,如果大家仔细阅读完了这两篇文章,相信你的CSS打怪技能又提高的一大截,那么趁着自己最近状态不错,就多给大家分享点自己平时所学的技能。一方面对自己的技能能够有一个总结,看自己到底理解透了没有,另一方面,以文章的形式分享出来,悦己同时悦他人。好了,开始进入今天的主题,今天轮到另一个定位属性登场了——relative,大家鼓掌欢迎👏👏👏。

2.relative的特性

relative,顾名思义,相对。在CSS中,我们都这样使用:position: relative,翻译成中文就是相对定位。不知道大家在使用的过程中,有没有想过这样的一个问题:它到底是相对谁定位呢?在揭开答案之前,我们还是以例子来说明问题。

<!--HTML代码-->
<div class="box">
    <div class="td">
        <div class="element1"></div>
        <h3>使用margin</h3>
    </div>
    <div class="td">
        <div class="element2"></div>
        <h3>使用relative</h3>
    </div>
</div>

可以直接看核心CSS代码:

/*CSS代码*/
.element1{
    margin-top: -30px;
}
.element2{
    position: relative;
    top: -30px
}

在浏览器中的效果如下:

006tKfTcgy1fr5bi9e97cj30980700sj

在本例中,使用.element1.element2两个CSS类达到的效果不一样,使用margin负值改变元素的位置后,后面元素的位置跟着变化,而使用position: relativetop负值改变元素的位置,后面元素的位置并没有发生改变。其实,这个例子说明了relative定位的两大特性:

1)相对自身。使用relative定位的元素,其相对的是自身进行偏移。

2)无侵入性。使用relative定位的元素,可以理解为产生了”幻影”,其真身依然在原来的位置上,所以并不会影响页面中其他的元素的布局。本例中,使用relative这几个字依然在原来的位置上,而使用margin这几个字则偏移了原来的位置。

3.relative的限制作用

3.1 relative对absolute的限制作用

我们知道,absolute定位的是其第一个祖先元素定位属性不为static属性,如果没有relative或者fixed定位的情况下,给absolute添加top/left、right/bottom等属性可以发生偏移,如下:

position: absolute;
top: 10px;
left: 10px;

此时,absolute元素就会迅速定位到局里浏览器左侧10像素,顶部10像素的地方。但是如果给父元素添加position: relative之后,则absolute的偏移能力被父元素限制住了,如下图所示:

006tKfTcgy1fr5d2wfj0aj30ah0bat8h

3.2 relative对overflow的限制作用

直接看下面的这个例子:

<!--HTML代码-->
<div class="box">
    <div class="son"/>
</div>
<div class="box" style="position: relative">
    <div class="son"/>
</div>

.box{
    overflow: hidden;
    width: 50px;
    height: 50px;
    background-color: #dddddd;
}
.son{
    position: absolute;
    width: 100px;
    height: 100px;
    background-color: #cd0000;
}

在这个例子中,.box的宽和高都是50px,而.son元素的宽和高都是100px,虽然.box元素设置了overflow:hidden,但依然限制不了.son元素的大小,其宽和高都是100px,而当.box设置了定位属性relative后,.son元素的宽和高乖乖的变成了50px。如下图所示:

006tNc79ly1frc7iywznbj305z0azq32

3.3 relative对层级z-index的限制作用

设置了定位元素的z-index值为数值可以创建”层叠上下文”(在后面的文章中会讲到)。在下面的第一幅图中,设置了margin负值,虽然同时设置了z-index为数值,但是后面的元素依然覆盖了前面的元素,而当增加了定位属性position: relative后,创建了层叠上下文,前面元素的层叠顺序高,虽然同时设置了margin负值,但是后面的元素依然覆盖不了前面的元素。如下图所示:

<!--HTML代码-->
<div class="son" style="z-index: 3"/>
<div class="son" style="z-index: 2;margin-top: -20px;background-color: tan;"/>
<!--分割线-->
<div class="son" style="position: relative;z-index: 3"/>
<div class="son" style="z-index: 2;margin-top: -20px;background-color: tan;"/>

006tNc79gy1frc79mx4ojj303607u3yg

下面抛出一个问题,如果设置了对立属性top/bottomleft/right的相对定位元素和绝对定位元素,它们是如何表现的?

CSS深入理解之absolute定位这篇文章中,我们知道绝对定位元素表现的是拉伸特性,从而可以保持流体特性,但是相对定位却是”你死我活”的状态,也就是说,只有一个方向的属性会生效,当top/bottom元素同时使用的时候,top生效,当left/bottom同时使用的时候,left生效。请看下面的这个例子:

<div class="box" style="position: relative; top: 10px;bottom: 500px"></div>

虽然同时设置了top/bottom对立属性,但是生效的却是top,如下图所示:

006tNc79ly1frc84m0c6uj305l03fdfq

因此,下面有些代码没有必要:

.demo{
    position: relative;
    top: 10px;
    right: 10px;/*无效*/
    bottom: 10px;/*无效*/
    left: 10px
}

4.相对定位relative的使用原则-最小化

虽然relative定位很好用,并且使用的频率很高,但是根据张鑫旭大神总结的布局实践原则,最好基于以下原则为好:

  1. 尽量避免使用relative,如果要定位某些元素,看能否使用”无依赖的绝对定位”实现;
  2. 如果使用场景受限,一定要使用relative,则务必使relative最小化。

比如,我们想在某个模块的右上角定位一个图标,如果让你去布局实现的话,你该如何布局呢?十有八九会如下面的方式实现:

<div style="position: relative">
    <img src="icon.png" style="position: absolute;top:0;right:0">
    <p>内容1</p>
    <p>内容2</p>
    <p>内容3</p>
    ...
</div>

但是,我们可以采用”relative的最小化使用原则”的方式实现,其代码如下面的方式实现:

<div>
    <div style="position: relative"><img src="icon.png" style="position: absolute;top:0;right:0"> </div>
    <p>内容1</p>
    <p>内容2</p>
    <p>内容3</p>
    ...
</div>

那么,基于”relative的最小化使用原则”的房还是实现有什么好处呢?原因及好处如下:

relative定位元素的层叠水平提高了(敬请期待后续的文章),如果其子元素越多,则影响的范围越广,从项目和可维护性的角度来看,如果后期不需要这个小图标了,我们可以大胆地干调relative单元的元素即可,其他的元素则不需要任何的修改,然后放心的去陪妹子了。但是,如果relative在最外层的容器上,你敢删除吗?你敢放心的去陪妹子吗?难道你不怕影响其他的元素吗?所以你应该只会删除小图标,而不会删除的relative属性的。然后你的项目代码越来越臃肿,很多无用代码,看起来非常糟糕😰。这么一分析,你可知道”relative最小化使用原则“的好处了吧~

5.最后

relative定位相对与absolutefloat的知识点要少很多,也比较好理解,相信大家已经搞明白了相对定位属性的功能。后面最新文章都会第一时间更新在我的公众号前端Talkking>里面,欢迎关注。

以上就是本文的全部内容,感谢阅读,如果有表述不正确的地方,欢迎留言指正!😊

6.参考

  • 张鑫旭《CSS世界》

    作者简介:
    中文名:石头
    英文名:micstone
    某电商平台前端程序员一名,偶尔也写写后端代码,工作经历2016.7~至今

如果有人让你推荐前端技术书,请让他看这个列表 ->《经典前端技术书籍 1 赞 1 收藏 评论