粘性定位可认为是相对定位和固定定位的结合，元素在跨越特定阈值前表现为相对定位，之后表现为固定定位。粘性定位的元素依赖于用户的滚动，在 relative 与 fixed 定位之间切换。
须指定 top、right、bottom 、left 四个阈值其中之一，才可使粘性定位生效，否则其行为与相对定位相同。
element {
position: sticky;
top: 50px;
}
样例1：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>粘性定位</title>
<style>
.box {
height: 1200px;
border: 1px solid rgb(109, 13, 218);
}
.left {
float: left;
height: 1200px;
width: 500px;
background-color: blue;
}
.right {
position: sticky;
top: 50px;
float: left;
height: 400px;
width: 700px;
background-color: yellow;
}
</style>
</head>
<body>
<nav style="height: 200px; width: 100%; background-color: red;"></nav>
<div class="box">
<div class="left"></div>
<div class="right">粘性定位的元素</div>
</div>
<div style="clear: both; height: 500px; background-color: green"></div>
</body>
</html>
该样例使黄色的块元素在距离顶部50px的距离时不再往顶部移动（父元素不具有实现粘性效果的活动空间时黄色块元素仍会往顶部移动），即表现为固定定位，运行结果如下：
样例2：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>粘性定位</title>
<style>
.box {
height: 1100px;
border: 1px solid rgb(109, 13, 218);
}
.left {
height: 800px;
width: 700px;
background-color: blue;
}
.right {
position: sticky;
bottom: 50px;
height: 300px;
width: 700px;
background-color: yellow;
}
</style>
</head>
<body>
<nav style="height:1200px; width: 100%; background-color: red;"></nav>
<div class="box">
<div class="left"></div>
<div class="right">粘性定位的元素</div>
</div>
<div style="clear: both; height: 200px; background-color: green"></div>
</body>
</html>
该样例使黄色的块元素在距离顶部50px的距离时不再往顶部移动（父元素不具有实现粘性效果的活动空间时黄色块元素仍会往底部移动），即表现为固定定位，运行结果如下：
注：
- 如果粘性定位元素的高度与其父元素的高度相等，粘性定位元素在粘性约束矩形中（父元素）将会没有实现粘性效果的活动空间，此时粘性失效。
- 粘性定位元素仅在其父元素内生效。
