CSS有两个最重要的基本属性，前端开发必须掌握：display和position。
本文介绍非常有用的position属性。我希望通过10分钟的阅读，帮助大家轻松掌握网页定位，说清楚浏览器如何计算网页元素的位置，尤其是新引进的sticky定位。
position属性用来指定一个元素在网页上的位置，一共有5种定位方式，即position属性主要有五个值。
下面就依次介绍这五个值。最后一个sticky是2017年浏览器才支持的，本文将重点介绍。
static是position属性的默认值。如果省略position属性，浏览器就认为该元素是static定位。
这时，浏览器会按照源码的顺序，决定每个元素的位置，这称为"正常的页面流"（normalflow）。每个块级元素占据自己的区块（block），元素与元素之间不产生重叠，这个位置就是元素的默认位置。
注意，static定位所导致的元素位置，是浏览器自主决定的，所以这时top、bottom、left、right这四个属性无效。
relative、absolute、fixed这三个属性值有一个共同点，都是相对于某个基点的定位，不同之处仅仅在于基点不同。所以，只要理解了它们的基点是什么，就很容易掌握这三个属性值。
这三种定位都不会对其他元素的位置产生影响，因此元素之间可能产生重叠。
relative表示，相对于默认位置（即static时的位置）进行偏移，即定位基点是元素的默认位置。
它必须搭配top、bottom、left、right这四个属性一起使用，用来指定偏移的方向和距离。
div{position:relative;top:20px;}上面代码中，div元素从默认位置向下偏移20px（即距离顶部20px）。
absolute表示，相对于上级元素（一般是父元素）进行偏移，即定位基点是父元素。
它有一个重要的限制条件：定位基点（一般是父元素）不能是static定位，否则定位基点就会变成整个网页的根元素html。另外，absolute定位也必须搭配top、bottom、left、right这四个属性一起使用。
/*HTML代码如下
*/#father{positon:relative;}#son{position:absolute;top:20px;}上面代码中，父元素是relative定位，子元素是absolute定位，所以子元素的定位基点是父元素，相对于父元素的顶部向下偏移20px。如果父元素是static定位，上例的子元素就是距离网页的顶部向下偏移20px。注意，absolute定位的元素会被"正常页面流"忽略，即在"正常页面流"中，该元素所占空间为零，周边元素不受影响。
fixed表示，相对于视口（viewport，浏览器窗口）进行偏移，即定位基点是浏览器窗口。这会导致元素的位置不随页面滚动而变化，好像固定在网页上一样。
它如果搭配top、bottom、left、right这四个属性一起使用，表示元素的初始位置是基于视口计算的，否则初始位置就是元素的默认位置。
div{position:fixed;top:0;}上面代码中，div元素始终在视口顶部，不随网页滚动而变化。
sticky跟前面四个属性值都不一样，它会产生动态效果，很像relative和fixed的结合：一些时候是relative定位（定位基点是自身默认位置），另一些时候自动变成fixed定位（定位基点是视口）。
因此，它能够形成"动态固定"的效果。比如，网页的搜索工具栏，初始加载时在自己的默认位置（relative定位）。
页面向下滚动时，工具栏变成固定位置，始终停留在页面头部（fixed定位）。
等到页面重新向上滚动回到原位，工具栏也会回到默认位置。
sticky生效的前提是，必须搭配top、bottom、left、right这四个属性一起使用，不能省略，否则等同于relative定位，不产生"动态固定"的效果。原因是这四个属性用来定义"偏移距离"，浏览器把它当作sticky的生效门槛。
它的具体规则是，当页面滚动，父元素开始脱离视口时（即部分不可见），只要与sticky元素的距离达到生效门槛，relative定位自动切换为fixed定位；等到父元素完全脱离视口时（即完全不可见），fixed定位自动切换回relative定位。
请看下面的示例代码。（注意，除了已被淘汰的IE以外，其他浏览器目前都支持sticky。但是，Safari浏览器需要加上浏览器前缀-webkit-。）
#toolbar{position:-webkit-sticky;/*safari浏览器*/position:sticky;/*其他浏览器*/top:20px;}上面代码中，页面向下滚动时，#toolbar的父元素开始脱离视口，一旦视口的顶部与#toolbar的距离小于20px（门槛值），#toolbar就自动变为fixed定位，保持与视口顶部20px的距离。页面继续向下滚动，父元素彻底离开视口（即整个父元素完全不可见），#toolbar恢复成relative定位。
sticky定位可以实现一些很有用的效果。除了上面提到"动态固定"效果，这里再介绍两个。
HTML代码就是几张图片。
CSS代码极其简单，只要两行。CSS代码也很简单。
（正文完）
初学者刚接触前端，往往会被一大堆技术名词、框架和工具，搞得眼花缭乱。
到底哪些技术是目前的主流技术栈，既能用于公司的开发实务，又能为自己的简历增添亮点？
下面就是一套目前主流的前端技术栈。
（1）Node.js：服务器端的JavaScript运行环境，不管哪种前端开发，都必不可少的底层环境。
（2）Webpack：语法转换工具，把ES6/TypeScript/JSX语法转成浏览器可以运行的代码。
（3）Koa2：一个非常流行、简洁强大的Node.js后端的Web开发框架。
（4）MongoDB：目前应用最广泛的非关系数据库之一，功能丰富，用法较简单。
（5）Vue全家桶：
现在，腾讯课堂就有一门这样的课程，内容包含了所有这些工具，教你怎么用它们从头完成一个全栈项目，亲手做出一个手机端的移动商城，是由慕课网的精英讲师--谢成老师讲授。
（完）
DeathGhost说：
哈哈，有前端知识了，这个应该能看懂了我。
sticky还是比较方便的。比fixed
littlePuppy说：
sticky学习了
xu说：
元素绝对定位absolute的情况下，即使父元素是静态定位static，它相对的基点也不一定是html，有可能是有定位过（static除外）的祖先元素。
windy说：
很好用的属性，但是要兼容ie11(怨念~)
李昂说：
清晰简洁明了，感谢阮老师
bigma说：
引用xu的发言：元素绝对定位absolute的情况下，即使父元素是静态定位static，它相对的基点也不一定是html，有可能是有定位过（static除外）的祖先元素。
其实就是向上找，直到找到一个不是static定位的元素为止
史大林说：
用position：sticky来固定表单的顶部看起来很美好，但是浏览器的兼容性会导致各种各样的问题。用caniuse查下就知道。之前做过类似的一个需求，最好的办法还是用js来固定，当初用的table-fixed-header这个jq插件。
关宇说：
阮老师，absolute有点问题：“父元素不能是static定位，否则定位基点就会变成整个网页的根元素html”
这么描述准确些：“相对于距离最近的有定位属性（一般是relative）的上级元素（一般是父元素）进行偏移，即定位基点是上级元素”
jarvis说：
学到了sticky
阮一峰说：
@xu，@关宇：
谢谢指出。我稍微改了一下，说明absolute定位的基点不能是static定位。
浪过扬帆说：
大脑袋比目鱼说：
cl2说：
sticky,学习了
方应杭的学生说：
fixed要小心transform
hewei说：
IE11居然不支持sticky。否则做个双吸顶效果舒服一步到位了
JavenLeung说：
关于“absolute定位的基点不能是static定位”那里，现在改的这个版本还是不太清晰，容易理解错
Arman说：
Absolute相对定位的元素应该是第一个非static定位的祖先元素或根元素吧
Mr.Ma说：
Bootstrap4中的导航条也用到了sticky定位，不过IE还是用不了。
Chao说：
陶某人说：
涨知识了，之前没用过，用来试试
国际庄hello范儿说：
简单易懂，解了长期的疑惑。。。。。
心斩心说：
JohnHoo说：
demo里面的th,只设置了sticky和top属性,没有设置所有的定位属性诶
引用JohnHoo的发言：demo里面的th,只设置了sticky和top属性,没有设置所有的定位属性诶
刚刚理解错了,再读一遍就理解了
liugezhou说：
sticky大法好
刘骏佳说：
我发现表格的demo切换时会有轻微的抖动，这个问题是怎么导致的？该如何解决呢？
Traceless说：
toolbar的overflow属性必须设置为visible，否则sticky不生效
NeilNing说：
当设置position=absolute时，如果其祖先元素都没有设置定位，并且也没有为当前元素设置任何left/top/right/bottom的值，其效果跟position=relative是一样的，元素并不会相对于根元素定位而出现在浏览器的左上角。
微wx笑说：
一直以为"动态固定"效果只能基于js实现，原来sticky也可以，调试的时候看到这个不知道什么作用，终于了解了。
melon说：
save说：
温故而知新
gehaoyu说：
再看无数遍
BugLi说：
可以提一下transform和fixed
而井说：
建议将【sticky生效的前提是，必须搭配top、bottom、left、right这四个属性一起使用，不能省略，否则等同于relative定位，不产生"动态固定"的效果】
修改为【sticky生效的前提是，必须搭配top、bottom、left、right这四个属性其中的一个或多个一起使用，不能省略，否则等同于relative定位，不产生"动态固定"的效果】，
否则容易产生歧义，会有人理解成要用sticky来达到“动态固定”的效果，必须同时设置四个属性。
Fighting_xiaobai说：
sticky会了会了，感谢阮大大不吝赐教！
康康康康康说：
原文：页面继续向下滚动，父元素彻底离开视口（即整个父元素完全不可见），#toolbar恢复成relative定位。这一段感觉有点问题，应该是：当页面回滚到阈值一下，#toolbar才会恢复成relative定位吧。
引用康康康康康的发言：原文：页面继续向下滚动，父元素彻底离开视口（即整个父元素完全不可见），#toolbar恢复成relative定位。这一段感觉有点问题，应该是：当页面回滚到阈值一下，#toolbar才会恢复成relative定位吧。
不好意思是我理解错了，阮老师想表达的和我的并不是一个意思。。
mirror说：
你好阮讲师:这一点有些疑惑"sticky生效的前提是，必须搭配top、bottom、left、right这四个属性一起使用，不能省略"--
我在测试使用sticky定位时,只是写了top一个属性,也能有效.这个是怎么回事呢.
gz668说：
absolute和fixed定位会脱离“正常页面流”，导致下面的块元素上移，也就是对周围元素位置产生了影响，而文中所说不会对周围元素产生影响，这里应该怎么理解呢？有点疑惑。
Can说：
"sticky生效的前提是，必须搭配top、bottom、left、right这四个属性一起使用，不能省略，否则等同于relative定位，不产生"动态固定"的效果。"
你的实例都不用搭配啊，不也生效吗？？
tomatoyyk说：
补充一点,粘性定位的祖先元素不能有overflowhidden,不然会失效,之前踩过这个坑
king说：
sticky跟前面四个属性值都不一样，它会产生动态效果，很像relative和fixed的结合；阮老师，我觉得sticky应该更像是static和fixed的结合吧？因为relative定位，在设置了top属性的情况下也会偏移，而sticky在未达到阀值的时候，表现更像是static，除非sticky情况下的top等四个属性只是用来设置阀值的
andy说：
哎，如果四个边可以用不同的定位方式就好了
大衍说：
如果对html进行absolute，又是相对于谁定位呢？
Devon说：
sticky对父元素的overflow属性有要求
雨一直下说：
没错，应该是逐级向上查找非static定位的父级元素，如果都没有，则以网页根节点(即：html)作为基点。
虫子的世界说：
我的补充总结：具体规则是当页面滚动的时候，父元素开始脱离视口，只要sticky元素与视口的距离达到生效门槛（必须至少搭配top、bottom、left、right中的一个来产生距离），它的定位模式就会切换到fixed；等到sticky元素开始超出父元素的范围，它的定位模式就会切换回relative，随后随着父元素一起滚出视口。可以这么理解：sticky保证了元素在父元素从开始脱离视口到父元素的空间尚可容纳该元素期间始终能完整呈现在视口中。
sunflower说：
sticky的固定效果生效后，如何给生效的div加上阴影？或其它样式效果？
不懒熊说：
感觉文中“它有一个重要的限制条件：定位基点（一般是父元素）不能是static定位，否则定位基点就会变成整个网页的根元素html。另外，absolute定位也必须搭配top、bottom、left、right这四个属性一起使用。”这句话描述不是很准确，因为当元素的position属性设置为absolute时，该元素会脱离"正常页面流"，并相对于最近的非static定位的祖先元素进行定位。也就是说如果它的父元素的是static，但是它的父元素的父元素不是static定位，则absolute定位的元素，则是以父元素的父元素进行定位，并不是根元素html。
