CSS样式中如何使用定位功能。

        什么是定位？

        position属性用于指定一个元素在文档中的定位方式。并通过top、left、right和bottom来决定该元素最终的位置。

语法：position：static | relative | fixed | absolute | sticky；top：0px；left：0px；

该属性的使用方法是，先指定元素的定位方式，如：静态定位、相对定位、固定定位、绝对定位、粘性定位；然后再去设置定位后的元素相较于定位位置上下左右的距离。

      2.1 静态定位（static）

        该关键字指定元素使用正常的布局行为，即元素在文档常规流中当前的布局位置。此时 top, right, bottom, left 和 z-index属性无效。

      2.2 绝对定位（relative）

        该关键字下，元素先放置在未添加定位时的位置（也就是红色边框的左上角处），再在不改变页面布局的前提下调整元素位置（即top、left、right和bottom的值，一般就设置top和left的值就可以了，因为定位改变了位置，因此会在此元素未添加定位时所在位置留下空白）。

      2.3 相对定位（absolute）

        元素会被移出正常文档流，并不为元素预留空间。这一点 很像浮动。通过指定元素相对于最近的非 static 定位祖先元素的偏移，来确定元素位置。这里需要说一下的是，绝对定位在不给其外部元素添加相对定位时，其绝对定位是相较于body来进行的。在给其外部元素添加了相对定位后，再给内部元素添加绝对定位，就是相对于添加了绝对定位的元素来进行的了。

        从下图可以很明显的看到在，外部盒子宽高都为200px，div1宽高50px，div2宽高为50px、100px；定位后top：50px；left：50px；在不给父元素添加相定位时，div1没有贴着中间的线显示，他是相较于body的上50px左50px。在添加定位后就可以达到父元素的中间线的位置。

       这是因为相对定位会首先基于父元素中最先有定位的地方为原点，都没有定位时以浏览器窗口为参照物。所以在下图中如果不给父元素加定位，那么div1就会以父元素边框外的浏览器窗口为参照物；在给父元素添加定位后，div1就以父元素红色边框的内边框为参照物。

      2.4 固定定位（fixed）

        元素会被移出正常文档流，并不为元素预留空间，而是通过指定元素相对于屏幕视(viewport)的位置来指定元素位置。由下图可以很直观的看到，元素的位置在屏幕滚动时不会改变。打印时，元素会出现在的每页的固定位置。

         

      2.5 粘性定位（sticky）

        元素根据正常文档流进行定位，然后相对于其最近滚动祖先元素根据正常文档流进行定位，然后相对它的最近滚动祖先（nearest scrolling ancestor）和 containing block (最近块级祖先 nearest block-level ancestor)，包括table-related元素，基于top, right, bottom, 和 left的值进行偏移。偏移值不会影响任何其他元素的位置。

        换通俗的话说，就是在你给元素添加了粘性定位，其就会根据页面的滚动来变化。一开始没滚动时，元素在原位置。滚动后根据你设置的top、left值来确定滚动时你的元素的位置。一般想要元素在滚动时一直在页面的做上面显示，就可以给top：0px；left：0px；就可以了。

​

        新人学习的一点小笔记，希望大家可以指出不足，谢谢。