首页手记【前端Talkking】CSS系列—&md...

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

标签：

Html/CSS CSS3

只看不赞，或者只收藏不赞的都是耍流氓，放学别走，我找我哥收拾你们。

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定位很好用，并且使用的频率很高，但是根据张鑫旭大神总结的布局实践原则，最好基于以下原则为好：

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

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

<div style="position: relative">
    <img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="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 class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="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.参考