CSS定位

CSS中通过指定position属性的值可以实现不同的定位方式，一共有static、relative、absolute、fixed等等。下面就详细介绍几种定位方式的区别。

static定位

static是position属性的默认值。如果省略position属性，浏览器就认为该元素是static定位。
这时，浏览器会按照源码的顺序，决定每个元素的位置，这称为"正常的页面流"（normal flow）。每个块级元素占据自己的区块（block），元素与元素之间不产生重叠，这个位置就是元素的默认位置。
Attention：static定位的元素，使用top、bottom、left、right这四个属性无效。

relative、absolute、fixed这三个属性值有一个共同点，都是相对于某个基点的定位，不同之处仅仅在于基点不同。如果理解了这三种定位方式的基点的位置，就可以掌握这三种定位方式了。

relative定位

定位是相对于默认位置（即static时的位置）进行偏移（设置偏移量的时候，会相对于默认所在的位置偏移）。设置了relative的元素仍然处在文档流中，元素的宽高不变，设置偏移量也不会影响其他元素的位置。最外层容器设置为relative定位，在没有设置宽度的情况下，宽度是整个浏览器的宽度。相对定位元素经常被用来作为绝对定位元素的容器块。

必须搭配偏移量进行使用。

div{
    position:relative;
    top:50px;
    left:0px;
}

absolute定位

定位是相对于离元素最近的设置了绝对或相对定位的父元素决定的，如果没有父元素设置绝对或相对定位，则元素相对于根元素即html元素定位。设置了absolute的元素脱离了文档流，元素在没有设置宽度的情况下，宽度由元素里面的内容决定。脱离后原来的位置相当于是空的，下面的元素会来占据位置。

div{
    position:absolute;
    top:50px;
    left:0px;
}

fixed定位

相对于浏览器窗口进行偏移，即定位基点是浏览器窗口。这会导致元素的位置不随页面滚动而变化，好像固定在网页上一样。

它如果搭配top、bottom、left、right这四个属性一起使用，表示元素的初始位置是基于浏览器窗口计算的，否则初始位置就是元素的默认位置。

div{
    position:fixed;
    top:50px;
}

sticky定位

基于用户的滚动位置定位，它会产生动态效果，很像relative和fixed的结合：一些时候是relative定位（定位基点是自身默认位置），另一些时候自动变成fixed定位（定位基点是浏览器窗口）。
这种定位方式可以形成“动态固定”的效果，初始加载时是relative的定位方式，当页面滚动超出设定的阈值时，便会切换为fixed定位，固定在页面上。元素定位表现为在跨越特定阈值前为相对定位，之后为固定定位。这个特定阈值指的是 top, right, bottom 或 left 之一，换言之，指定 top, right, bottom 或 left 四个阈值其中之一，才可使sticky定位生效。否则其行为与相对定位相同。

#toolbar {
  position: -webkit-sticky; /* safari 浏览器 */
  position: sticky; /* 其他浏览器 */
  top: 20px;
}