乐趣区

关于前端:你可能不知道的绝对定位

欢送关注我的公众号:前端侦探

分享一个对于相对定位的实战开发教训。

在广泛的认知下,相对定位如同都是随同着偏移属性(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 这样的偏移量,不仅代码更加精简,有时还能达到意想不到的成果,上面总结一下

  1. 相对布局的个性是不占空间,但不肯定齐全脱离文档流,只有在设置了偏移时才会脱离文档流
  2. 如果只设置了一个方向上的偏移量,那么在另外一个方向上依然保留着文档流个性
  3. 在相对定位中,::before要比 ::after 要好用的多,因为 ::before 默认就是初始地位,能够很轻易的实现重叠成果

而后就是实战了,依据下面这些案例,置信大家对相对定位肯定有了新的意识,多多应用吧~ 最初,如果感觉还不错,对你有帮忙的话,欢送 点赞、珍藏、转发❤❤❤

欢送关注我的公众号:前端侦探

本文参加了 SegmentFault 思否写作挑战赛,欢送正在浏览的你也退出。

退出移动版