CSS 定位，你爱不爱？

本篇文章参考以下博文

• CSS 定位详解

前言

  之前一篇文章介绍了 CSS 的 Flex布局 ，可以帮助大家解决很大一部分元素布局问题，对 Flex布局 感兴趣的同学可以看下面这篇。

• Flex布局，真香！

  这一节我们一块来学习另一个重要的关于位置的属性 position 。我知道这个属性你们都懂，但是读完这篇文章后，相信你能更懂。

一、position 属性值

   position 一共有 5 个值，没错，是 5 个， 2017 年浏览器才偷偷摸摸支持了一个新的属性值， 居然不通知我们。

（这里指的浏览器当然不包括IE，在前端眼里，IE不算浏览器，应该算麻烦器）

  言归正传，五个属性值分别如下，其中最后一个 sticky 是我们不太常见的，但是它实现的功能我们都见过。

• static
• relative
• fixed
• absolute
• sticky

二、static 属性值

  该属性是 position 的默认值，如果不设置 position 的话，那么定位就是 static。这个位置是按照元素的代码顺序生成的，不产生重叠，一个挨一个。

  由于 Static 是浏览器自动决定的，所以 top 、 bottom 、 left 、 right 这四个属性无效。

三、relative，absolute，fixed 属性值

   relative ， absolute ， fixed 这三个值他们之间的区别就是参照物不同，他们定位时的基点不同，只要弄明白分别对应哪个基点，就能快速区分出来。

3.1 relative

   relative 表示，相对于默认位置（即 static 时的位置）进行偏移，即定位基点是元素的默认位置。

  它必须搭配 top 、 bottom 、 left 、 right 这四个属性一起使用，用来指定偏移的方向和距离。

div {
  position: relative;
  top: 20px; //距离顶部20像素
}

3.2 absolute

   absolute 的基点是父元素，准确地说是父元素中最近一个定位不是 static 的元素。这里可以记住一个口诀，子绝父相，子是绝对定位，那父元素中必须有相对定位，也就是上一节的 relative 。

/*
  HTML 代码如下
  <div id="father">
    <div id="son"></div>
  </div>
*/

#father {
  margin: 10px; //这个margin是为了让界面上的位置区分明显，跟定位没关系
  positon: relative;
}
#son {
  position: absolute;
  top: 20px;
}

  上面代码中，子绝父相，结果就是，子相对父元素偏移。

  注意： absolute 定位的元素会被"正常页面流"忽略，即在"正常页面流"中，该元素所占空间为零，周边元素不受影响。效果就好像这个元素悬浮在这个父元素盒子中的最上面。

3.3 fixed

   fixed 表示，相对于 浏览器窗口 进行偏移，基点是浏览器窗口。元素会固定在浏览器某一位置不动，不随滚动条滚动而移动。

四、sticky 属性值

  千呼万唤始出来，终于到了本篇的重点了， sticky 这个词的英文意思是 粘性的 / 告示贴 ，我们先来猜猜这个东西的功能。

  便利贴有什么作用？一般就是用来提示一些信息，方便别人看到，这么看的话感觉这个功能和 fixed 差不多，固定在浏览器的某个地方，方便别人查看。

  这个属性的功能还真和 fixed 相关，它能够形成" 动态固定 "的效果，当满足设定的条件时，就会变成 fixed 定位。比如我们常见的百度搜索栏。

  我们向下滑动的时候，如果滑动超过搜索栏的高度后，搜索栏就会变成固定定位。

  这个功能设置起来非常简单。如下所示，只要向下滑动的距离超过 20px 定位就会变成 fixed

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

  当向下滚动距离超过其父元素的高度的时候（即完全不可见）， fixed 定位自动切换回 relative 定位。

五、sticky 应用

  这个属性实现的效果远比我们想象的强大。比如当表格滚动的时候我们希望固定表头，方便查看信息。

th {
  position: sticky;
  top: 0; 
}

  只要上面两行代码就可以搞定，需要注意的是， sticky 必须设在 <th> 元素上面，不能设在 <thead> 和 <tr> 元素，因为这两个元素没有 relative 定位，也就无法产生 sticky 效果。