你可能不知道的绝对定位

角标可以通过伪元素生成.item::before{content:'recommended';位置：绝对；字体大小：12px；行高：16px；填充：2px4px；背景：#FDB324；color:#fff;}注意，这里使用::before而不是::after，原因是::before位于左上角元素内容之前，如果是::之后，默认位置就在img的下方。在设置position:absolute的情况下，不占用空间，所以不影响其他元素。效果如下。所以，在这种场景下，设置offset和parent定位都可以都是多余的/*下面是多余的*/.item{position:relative;}.item::before{left:0;top:0;}如果你的项目中有这样的布局，请赶紧优化，当然仅限于“左上角”的标签。如果是其他方向，按照传统实现即可。可以访问以下任一链接：CSS绝对标签（codepen.io）CSS绝对标签（runjs.work）3.文字重叠有时候在做文字效果的时候，文字重叠是不可避免的，比如文字的外描边效果文本。大家可能知道，文字描边其实是居中的stroke.text{-webkit-text-stroke:6pxrgb(51,51,51);}这会带来一个问题，当描边逐渐变大时，会覆盖文字颜色。为了解决这个问题，我们需要使用两层文字，把描边放在最下面，文字颜色放在最上面，表示如下，这里的两层重叠文字需要使用绝对定位，假设HTML是这样的前端侦探

这里再添加一个data-title属性，用来生成伪元素，关键实现如下如下。text::before{内容：attr（数据标题）；position:absolute;}只需要设置::before为绝对定位即可，注意::before不需要其他任何offset属性，文字默认会重叠，因为是绝对定位，层级会自动变高.从这里也可以看出，在绝对定位中，::before比::after好用多了！文字修改效果可以参考上一篇文章：CSS与SVG实现文字渐变、描边、投影完整demo。可以访问以下任一链接：CSS文字描边（codepen.io）CSS文字描边（runjs.work）四、多个元素水平、垂直堆叠居中再看一个例子。有多个元素或可变大小的图像需要堆叠和居中。最简单的方式如下：父容器设置了flex居中特性，然后直接设置子元素的绝对定位。关键实现如下。包装{显示：弹性；证明内容：居中；align-items:center;}.item{position:absolute;}原因是元素本身是居中的。设置绝对定位后，只占不占空间，所以后面的元素会堆叠在一起，不会挤压，特别适合图片堆叠的效果。完整的demo可以访问以下任一链接：CSS绝对居中（codepen.io）CSS绝对居中（runjs.work）5.自定义水平方向的点击范围还记得上一篇文章吗？CSS树结构目录中有一个小细节也是使用了绝对定位，非常巧妙。下面我们简单回顾一下：假设HTML是这样的spanclass="tree-item">文件夹1-1-2

文件夹1-1-3

文件夹1-1-3-1

文件夹1-1-3-2

树结构有一个明显的缩进层次关系，这里是通过内边距实现的细节{padding-left:10px}。有一个问题，由于层层嵌套结构，层越深，点击范围越小，像这样那么，如何让所有的banner都可以点击呢？此时，我们可以创建一个伪元素，并设置绝对定位，但只需要设置水平方向的偏移量，使得水平方向的位置固定（相对于外父级），而在垂直方向direction，还是默认的位置，也就是跟随容器本身，关键实现如下。tree{/*最外层parent需要设置相对定位*/position:relative;}.tree-item::before{content:'';位置：绝对；左：10px；right:10px;/*水平尺寸取决于parent.tree*/height:38px;背景：#EEF2FF；边界半径：8px；z-指数：-1；不透明度：0；transition:.2s;}.tree-item:hover::before{opacity:1;}效果是这样的，很完美，而且除了这个方法，好像没有其他更好的方案了。其他方案欢迎留言讨论完整demo。您可以访问以下任何一个链接：CSS树(codepen.io)CSS树(runjs.work)它不一定需要left或top等偏移量。不仅代码更加精简，有时还能达到意想不到的效果。让我们总结一下绝对布局的特点。它不占用空间，但不一定完全脱离文档流。当设置偏移量时，它将离开文档流。如果只设置一个方向向上偏移，则在另一个方向上仍保留文档流特征。在绝对定位中，::before比::after好用很多，因为::before默认为初始位置，可以很容易的实现重叠效果，然后才是实战。基于以上案例，相信大家一定对绝对定位有了新的认识。多多使用~最后，如果觉得对你有好处和帮助，请点赞、收藏、转发???欢迎关注我的公众号：前端大侦探这篇文章参加了SegmentFault思维写作挑战赛，欢迎正在阅读的你加入