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 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 > 里面, 欢迎关注.
来源: https://segmentfault.com/a/1190000014877050