欢送关注我的公众号：前端侦探
分享一个对于相对定位的实战开发教训。
在广泛的认知下，相对定位如同都是随同着偏移属性（left/right/top/bottom）一起呈现的，置信大家都写过这样的CSS，如下
el{ position: absolute; left: 0; top: 0;}其实，有些状况下是能够不须要偏移量的，不仅实现上更加简洁，适应性也更强，甚至还能实现加上偏移量反而实现不了的布局，一起看看吧，置信会有不一样的领会
一、相对定位的个性
谈到相对定位布局，大家可能会马上就会想到这些个性：
- 不占用空间
- 脱离文档流
第一条没什么问题，的确不会占用空间。当初来看第二条，真的齐全脱离文档流了吗？假如有这样一个布局
<p> 欢送关注前端侦探</p>而后生成一个伪元素，设置成相对定位
p::after{ content: 'A'; position: absolute; color: red;}在不设置任何偏移的状况下，能够看到，相对定位元素始终追随在文本前面，也就是说，当初依然处于文档流中，如下
如果仅设置一个方向，比方left
p{ position: relative;}p::after{ content: 'A'; position: absolute; color: red; left: 0;}那么，在程度方向上，相对定位元素始终位于最右边，而垂直方向上，依然放弃着追随文档的个性，只是单方向的
如果两个方向上都设置了，这也是咱们最常见的写法
p::after{ content: 'A'; position: absolute; color: red; left: 0; top：0}那么，这个元素地位就齐全固定了，真正的脱离了文档流
综上所述，相对定位元素，只有在设置了偏移时才会脱离文档流，如果只设置了一个方向上的，那么在另外一个方向上依然保留着文档流个性，或者这么说，相对定位元素依然放弃在原来的地位，并且不占空间，除非设置了偏移才会真正固定定位
理解了这些，上面来看几个理论案例
二、左上角的标签
大家可能常常会碰到这样的“角标”成果
当初简略实现一下，假如HTML是这样的
<div class="item"> <img class="cover" src="xxx"></div>角标能够通过伪元素生成
.item::before{ content: '举荐'; position: absolute; font-size: 12px; line-height: 16px; padding: 2px 4px; background: #FDB324; color: #fff;}留神，这里用到的是::before，而不是::after，起因在于::before在元素内容之前，自身就位于左上角，如果是::after，默认地位就在img的下方，在设置position: absolute的状况下，因为不占空间，所以也不影响其余元素，成果如下
因而，像这种场景下，设置偏移量和父级定位能够说都是多余的
/*以下是多余的*/.item{ position: relative;}.item::before{ left: 0; top: 0;}如果你的我的项目中也有这样的布局，连忙优化一下吧，当然仅限于“左上角”的标签，如果是其余方位的，按传统实现即可
残缺 demo 能够拜访以下任意链接：
- CSS absolute tag (codepen.io)
- CSS absolute tag (runjs.work)
三、文本重叠
有时候在做文本特效时，不可避免须要重叠文本，比方文本外描边成果
大家可能都晓得，文本描边其实是居中描边的
.text{ -webkit-text-stroke: 6px rgb(51, 51, 51);}这样会带来一个问题，当描边缓缓变大时，会笼罩文字色彩
为了解决这个问题，咱们须要用到两层文本，在底下放描边，下面放文本色彩，示意如下
而这里两层重叠的文本就须要用到相对定位了，假如HTML是这样的
<p class="text" data-title="前端侦探">前端侦探</p>这里加另一个data-title属性，用来生成伪元素，要害实现如下
.text::before{ content: attr(data-title); position: absolute;}只须要将::before设置相对定位即可，留神是::before，无需任何其余偏移属性，文本就默认重叠了，而且因为是相对定位，层级也主动变高
从这里也能够看出，在相对定位中，::before要比::after要好用的多！
对于文本润饰成果能够参考以前这篇文章：CSS和SVG实现文字突变、描边、投影
残缺 demo 能够拜访以下任意链接：
- CSS text stroke (codepen.io)
- CSS text stroke (runjs.work)
四、多个元素程度垂直重叠居中
再来看一个这样的例子，有多个尺寸不定的元素或者图片，须要重叠居中，示意如下
最简略的形式就是，父容器设置flex居中个性，而后子元素间接设置相对定位，要害实现如下
.wrap{ display: flex; justify-content: center; align-items: center;}.item{ position: absolute;}起因在于，自身元素是居中的，设置相对定位后，仅仅不占空间而已，所以前面的元素会重叠上来而不挤压，特地适宜图片重叠展现的成果
残缺 demo 能够拜访以下任意链接：
- CSS absolute center (codepen.io)
- CSS absolute center (runjs.work)
五、自定义程度方向点击范畴
还记得之前这篇文章吗？CSS 实现树状构造目录
外面有个小细节也用到了相对定位，十分奇妙，上面简略回顾一下：
假如HTML是这样的
<details> <details> <summary> <span class="tree-item">文件夹1-1</span> </summary> <details> <summary> <span class="tree-item">文件夹1-1-2</span> </summary> </details> <details> <summary> <span class="tree-item">文件夹1-1-3</span> </summary> <details> <summary> <span class="tree-item">文件夹1-1-3-1</span> </summary> </details> <details> <summary> <span class="tree-item">文件夹1-1-3-2</span> </summary> </details> </details> </details></details>树形构造有一个显著的缩进层级关系，这里是通过内边距实现的
details{ padding-left: 10px}有个问题是，因为是逐层嵌套构造，导致 层级越深，点击范畴越小，就像这样
那么，如何做成通栏都能够点击呢？
这时，咱们能够创立一个伪元素，并设置相对定位，然而只须要设置程度方向上的偏移量，这样在程度方向上地位就是固定的（绝对于外层父级），而垂直方向上，依然处于默认地位，也就是追随容器自身，要害实现如下
.tree{ /*最外层父级须要设置绝对定位*/ position: relative;}.tree-item::before{ content: ''; position: absolute; left: 10px; right: 10px;/*程度方向的尺寸依赖于父级.tree*/ height: 38px; background: #EEF2FF; border-radius: 8px; z-index: -1; opacity: 0; transition: .2s;}.tree-item:hover::before{ opacity: 1;}成果是这样的
这样就十分完满了，而且除了这种形式，如同找不到其余更好的解决方案了，有其余解决方案欢送留言探讨
残缺 demo 能够拜访以下任意链接：
- CSS tree (codepen.io)
- CSS tree (runjs.work)
六、最初总结一下
举了这么多例子，其实无非就是想强调一下，在应用相对定位时并不一定须要left或者top这样的偏移量，不仅代码更加精简，有时还能达到意想不到的成果，上面总结一下
- 相对布局的个性是不占空间，但不肯定齐全脱离文档流，只有在设置了偏移时才会脱离文档流
- 如果只设置了一个方向上的偏移量，那么在另外一个方向上依然保留着文档流个性
- 在相对定位中，
::before要比::after要好用的多，因为::before默认就是初始地位，能够很轻易的实现重叠成果
而后就是实战了，依据下面这些案例，置信大家对相对定位肯定有了新的意识，多多应用吧~最初，如果感觉还不错，对你有帮忙的话，欢送点赞、珍藏、转发❤❤❤
欢送关注我的公众号：前端侦探
本文参加了SegmentFault 思否写作挑战赛，欢送正在浏览的你也退出。