【前端Talkking】CSS系列——CSS深刻理解之relative定位

1.前言

在前面的两篇文章：CSS深刻理解之float浮动和CSS深刻理解之absolute定位中，介绍了float和absolute的特性和使用方法，若是你们仔细阅读完了这两篇文章，相信你的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
}
复制代码

在浏览器中的效果以下：

在本例中，使用.element1和.element2两个CSS类达到的效果不同，使用margin负值改变元素的位置后，后面元素的位置跟着变化，而使用position: relative和top负值改变元素的位置，后面元素的位置并无发生改变。其实，这个例子说明了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的偏移能力被父元素限制住了，以下图所示：

3.2 relative对overflow的限制做用

直接看下面的这个例子：

<!--HTML代码-->
<div class="box">
    <div class="son"></div>
</div>
<div class="box" style="position: relative">
    <div class="son"></div>
</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。以下图所示：

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

设置了定位元素的z-index值为数值能够建立"层叠上下文"（在后面的文章中会讲到）。在下面的第一幅图中，设置了margin负值，虽然同时设置了z-index为数值，可是后面的元素依然覆盖了前面的元素，而当增长了定位属性position: relative后，建立了层叠上下文，前面元素的层叠顺序高，虽然同时设置了margin负值，可是后面的元素依然覆盖不了前面的元素。以下图所示：

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

下面抛出一个问题，若是设置了对立属性top/bottom、left/right的相对定位元素和绝对定位元素，它们是如何表现的？

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

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

虽然同时设置了top/bottom对立属性，可是生效的倒是top，以下图所示：

所以，下面有些代码没有必要：

.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定位相对与absolute和float的知识点要少不少，也比较好理解，相信你们已经搞明白了相对定位属性的功能。后面最新文章都会第一时间更新在个人公众号<前端Talkking>里面，欢迎关注。

以上就是本文的所有内容，感谢阅读，若是有表述不正确的地方，欢迎留言指正！😊

6.参考

• 张鑫旭《CSS世界》

---

碰见了，不妨关注下个人微信公众号「前端Talkking」