CSS系列——CSS深入理解之relative定位

1.前言

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

2.relative的特性

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

可以直接看核心CSS代码：

在浏览器中的效果如下：

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

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

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

3.relative的限制作用

3.1 relative对absolute的限制作用

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

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

3.2 relative对overflow的限制作用

直接看下面的这个例子：

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

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

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

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

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

虽然同时设置了对立属性，但是生效的却是，如下图所示：

因此，下面有些代码没有必要：

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

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

尽量避免使用relative，如果要定位某些元素，看能否使用"无依赖的绝对定位"实现；

如果使用场景受限，一定要使用relative，则务必使relative最小化。

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

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

那么，基于"relative的最小化使用原则"的房还是实现有什么好处呢？原因及好处如下：

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

5.最后

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

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

6.参考

张鑫旭《CSS世界》