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 class="box"></div>
<div class="box" id="example-element"></div>
<div class="box"></div>
<p style="clear: left;">为了演示position: sticky效果</p>
<p>这里增加了一个可滚动的容器</p>
<p>上下滚动这段内容</p>
<p>你将发现黄色框会始终停留在视线范围内</p>
<p>就像黏在在顶部一样</p>
<p>重新向下滚动</p>
<p>黄色框还会恢复到原来的位置</p>
<p>使用sticky特性</p>
<p>可以实现很多特效</p>
<p>比如始终黏在顶部的菜单栏</p>
<p>发挥想象力还可以实现其他效果...</p>
</div>
</div>
</td>
</tr>
</table>
<script>
function updateStyle(position_mode) {
let box = document.getElementById("example-element")
if (position_mode == 'static') {
box.style = ""
} else if (position_mode == 'relative') {
box.style = "position: relative; top: 40px; left: 40px;"
} else if (position_mode == 'absolute') {
box.style = "position: absolute; top: 40px; left: 40px;"
} else if (position_mode == 'fixed') {
box.style = "position: fixed; top: 40px; left: 40px;"
} else if (position_mode == 'sticky') {
box.style = "position: sticky; top: 20px;"
}
}
</script>
</body>
</html>参考文献
[1]. https://developer.mozilla.org/zh-CN/docs/Web/CSS/position