CSS的position属性用于指定元素在文档流中的定位方式，position属性和top、bottom、left、right属性一起决定元素的最终位置。position属性拥有static、relative、absolute、fixed、sticky五个可选项，下面动画展示了一个吸顶导航菜单的样式，当向上滚动页面时导航菜单始终黏在顶部位置，使用sticky属性可以轻松实现这个效果。
在正式引出sticky特性之前，有必要重新回顾下position各个属性的特征，真正理解了它们的含义用起来才会得心应手，出现问题也有清晰的思路去排查并解决它，而且理解sticky也依赖对其他属性的理解。
static是默认行为
该关键字指定元素使用正常的布局行为，即元素在文档常规流中当前的布局位置。此时 top, right, bottom, left 和 z-index 属性无效。见下图黄色方框的位置，它所在的位置就是正常文档流应在的位置。
relative是相对原位置的偏移
该关键字下，元素先放置在未添加定位时的位置，在不改变页面布局的前提下调整元素位置。继续看黄色方框，假如仅仅设置position为relative的话，黄色方框的位置和static位置是一样的，也就是它按照正常文档流布局，但是此时top、left、right、bottom属性会改变黄色方框的位置，示例中黄色方框相对于原有位置向左、向下偏移了40px。
absolute是相对父级元素的偏移
元素会被移出正常文档流，并不为元素预留空间，通过指定元素相对于最近的非 static 定位祖先元素的偏移，来确定元素位置。包裹黄色方框的元素position被设置为relative，那么黄色方框就会依据其父级元素的位置为基准进行定位，示例中它相对于父级元素向左、向下偏移40px。
fixed是相对于视口的偏移
元素会被移出正常文档流，并不为元素预留空间，而是通过指定元素相对于屏幕视口（viewport）的位置来指定元素位置。下面的示例点击固定定位后，黄色方框移到了浏览器视口向左、向下40px的位置，且无论页面如何滚动，黄色框的位置始终和浏览器视口相对位置不变。
sticky是relative和fixed的结合体
最后，终于说到了ticky属性，它是relative和fixed属性的结合体，示例中黄色方框的样式设置为"position: sticky; top: 20px;"，为了演示sticky的效果，将其上级元素设置了一个固定的高度并显示滚动条，当黄色方框与父元素的顶部高度大于20px时，它表现出relative的行为（也和static相似），正常布局到文档流中；当达到top为20px阈值之后，黄色方框始保持top=20px的位置，表现出黏在顶端的效果，此时表现出fixed的行为。
最后给出上面演示示例的完整源码，实际运行并点击每个选项实际体验一下，相信理解会更加深刻：
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>css position演示</title> <style> body { font-size: larger; } .box { float: left; margin: 1rem; width: 100px; height: 100px; border: 3px solid #00f; background: rgba(0, 0, 255, .2); } #example-element { border: 3px solid #f00; background: rgba(255, 255, 0, .6); } #example-option { display: flex; flex-flow: column; } table { border-collapse: collapse; border: 1px solid gray; } td { padding: 16px; border-right: 1px solid gray; } button { margin: 0.5rem; padding: 1rem 2rem; } </style></head><body> <h1>Position属性效果演示</h1> <table> <tr> <td id="example-option"> <button onclick="updateStyle('static')"> 默认定位 <br> position: static; </button> <button onclick="updateStyle('relative')"> 相对定位<br> position: relative; top: 40px; left: 40px; </button> <button onclick="updateStyle('absolute')"> 绝对定位<br> position: absolute; top: 40px; left: 40px; </button> <button onclick="updateStyle('fixed')"> 固定定位<br> position: fixed; top: 40px; left: 40px; </button> <button onclick="updateStyle('sticky')"> 粘性定位<br> position: sticky; top: 20px; </button> </td> <td id="output"> <div style="height: 452px;overflow: scroll;"> <div style="position: relative;"> <p>这个示例演示css position属性</p> <br> <br> <br> <div>参考文献
[1]. https://developer.mozilla.org/zh-CN/docs/Web/CSS/position
