css基础之position定位超级详解

我之前对position定位属性的了解仅限于absolute，relative，fixed，甚至以为relative就是用来给子级元素定位的。接下来就好好讲一讲你或许不知道但是确很常用，或者用的知其然，不知其所以然的地方。
position属性其实一共有五个值：static、relative、absolute、fixed、sticky

一、static

static其实是position的默认属性，就是当你没有写position属性的属性，浏览器默认你的定位是position: static，这个时候元素还没有脱离文档流，元素与元素还没有产生重叠，元素所在的位置就是按照布局默认的位置。

二、relative

relative是相对定位，所谓的相对定位是相对于自身默认所在的位置进行偏移。
下面的代码.box元素距离默认位置30px(即向右偏移30px)。

.box{
  position: relative;
  left: 30px;
}

三、absolute

absolute是绝对定位，是相对于已定位的父元素进行定位（即position属性不是static的元素），如果父元素都没有定位的话，会一直往上找，直到父元素定位属性不是static的元素，如果一直找不到，就相对于body定位。所以这就有了为什么我们一般给父元素写个relative的原因，其实父元素写别的定位属性也行，例如fixed、sticky、absolute，但是如果父元素是absolute，父元素就要继续找他的已定位的父元素，不建议这样写，不太符合布局思想。
下面的代码就是相对父元素偏移的基础再偏移30px

  



.parent{
  position: relative;
  left: 30px;
}
.child{
  position: absolute;
  left: 30px;
}

四、fixed

fixed是固定定位，定位基点是浏览器窗口，这会导致元素的位置不随页面滚动而变化，好像固定在网页上一样。而且别忘了 position也可以相对于fixed的父元素定位哦。
下面代码中，元素始终距离视口顶部50px，不随网页滚动而变化。

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

五、sticky

，它跟前面四个属性值都不一样，它会产生动态效果，很像relative和fixed的结合：一些时候是relative定位（定位基点是自身默认位置），另一些时候自动变成fixed定位（定位基点是视口）。
一般浏览商城网页的时候，你经常看到搜索框离开视口的就变成了固定定位，等到页面重新向上滚动回到原位，搜索框也会回到默认位置。

生效的具体规则是，当页面滚动，父元素开始脱离视口时（即部分不可见），只要与sticky元素的距离达到生效门槛，relative定位自动切换为fixed定位；等到父元素完全脱离视口时（即完全不可见），fixed定位自动切换回relative定位。

sticky生效的前提是，必须搭配top、bottom、left、right这四个属性其中只是一个一起使用，不能省略，否则等同于relative定位，不产生"动态固定"的效果。原因是这四个属性用来定义"偏移距离"，浏览器把它当作sticky的生效门槛。

目前的浏览器基本都已支持，但是，Safari浏览器需要加上浏览器前缀-webkit-。

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

所以当你再写这种需求的时候，就不用写一大堆的js代码了，只要两句css代码就搞定了。

少看推文多看书，动动脑子动动手。
（当然一些高质量的博客还是可以看的，比如阮一峰的博客）
本文参考了阮一峰大神的博客，大神传送门css定位详解 - 阮一峰