CSS 知识点：定位

CSS 中的定位指的即是 position 属性，它可以指定元素在页面上的位置。

position 属性有五个值，分别为：

下面就来依次了解一下。

static 定位

即元素 position 属性的默认值。元素按照页面的正常流排列。此时元素不会受到 left, top, right,bottom 这四个值的影响。

relative 即相对定位，相对于元素的正常位置。它偏移后原本所占的空间并不会改变。

.box {
  position: relative;
  top: 100px;
  left: 100px;
}

具有 relative 定位的元素一般会作为 absolute 定位的元素容器。

absolute 即绝对定位，绝对定位的元素的位置相对于最近的已定位父元素（不能是 static 定位），如果元素没有已定位的父元素，那么它的位置会相对于浏览器窗口。

fixed 即固定定位，相对于浏览器窗口，fixed 定位的元素是一直固定的，即不随着页面滚动而滚动。

.box {
  position: fixed;
  top: 10px;
  left: 10px;
}

sticky 定位跟前几个不太一样，它会自动产生一种「吸顶效果」。比如一些网站的导航栏，初始状态下会在自己的默认位置，当页面向下滚动时，导航栏会固定在页面头部，紧贴浏览器视口上边缘；当页面向上滚动时，它又会自动回到自己的初始位置。这一效果就可以使用 sticky 实现。

.box {
  margin-top: 100px;
  position: sticky;
  top: 0;
  left: 10px;
}

在 sticky 出现之前，我们往往通过 fixed 定位搭配 scroll 事件实现这一效果。