position 属性的常用的5种取值

日期：2020 年 6 月 22 日

position 属性

前言

说到 CSS 的 position 属性，大家都知道也都用过，但是要说它有几个取值以及这些值的不同，可能有部分同学会哑口无言，毕竟这不影响日常开发（手动狗头），身为一名有梦想的程序员，我们应该秉承刨根问底的钻研精神，不能浅尝辄止、不求甚解，万丈高楼平地起，基础才是万物之根，基础知识掌握了，后面的学起来也会更容易

废话不多说，正文开始

小序

position 属性的取值有：static | relative | absolute | fixed | sticky | inherit | initial | unset

其中 inherit、initial、unset 3个是 css 关键字，任何 css 属性的取值都可以设置这几个值，

那么剩下的 5 种就是我们要讲的，也是常用的 5 种：

static、relative、absolute、fixed、sticky

下面结合实例讲一讲它们的实际效果与区别

1、static

static 是 position 的默认属性值，当 position 为 static 的时候，left | right | top | bottom 属性无效，也就是当没有设置 position 属性的时候，会默认为是：

position: static; 如果我们直接设置成 position: static; 效果也是一样的，如下：

没有设置 position 属性

将 position 属性设置为 static ，效果与上面一样

2、relative

当 position 为 relative 的时候，如果设置了 left 、right、top、bottom 属性，它们会生效，发生偏移时的参照为 position 属性取 static 时盒子的位置，如下：

3、absolute

当 position 为 absolute 的时候，元素会被移出正常文档流，并不为元素预留空间，元素相对于最近的非 static 定位祖先元素发生偏移，如下：

当元素没有非 static 定位祖先时，会相对 html 发生偏移：

4、fixed

当 position 为 fixed 的时候，元素会被移出正常文档流，并不为元素预留空间，通常情况下，元素相对于屏幕视口（viewport）的位置来发生偏移, 元素的位置在屏幕滚动时不会改变，如下：

但需要注意的一点是 transform 属性会改变 position: fixed 的参照对象，即 fixed 元素会相对于其第一个具有 transform 属性的祖先元素发生偏移

5、sticky

sticky 定位，或者叫粘性定位，可以被认为是 relative 和 fixed 的混合，元素在跨越特定阈值前为相对定位，之后为固定定位。

也就是说 sticky 会让元素在页面滚动时如同在正常流中（relative定位），但当滚动到特定位置时就会固定在屏幕上如同 fixed ，这个特定位置就是指定的top、right、bottom、left 4个阈值其中之一

sticky定位的阈值是相对它的最近滚动祖先来定义的，而 sticky 的作用区域也是它的第一个非static父元素内，也就是说粘性布局的效果只在该父元素内表现出来，这里放一段代码如下：

看一下效果：

这里目标元素（sticky 定位的元素）为每个列表的第一项，它的阈值是 top: 0, 注意这里的 top: 0 是相对离它最近的滚动祖先，也就是它的爷爷（图中带滚动条的box), 而它的作用范围是它的第一个非 static 祖先，也就是 ul 元素，所以整体的效果就是，当蓝色的 li 元素距离最外层 box 顶部距离为 0 时， 它就会固定在 ul 中它当前所处的位置，直到 ul 滚出 box ，它也会随之滚出去

以上纯属个人总结，如有错误，还请批评指正！