元素根据正常文档流进行定位,然后相对它的最近滚动祖先(nearest scrolling ancestor)和 containing block (最近块级祖先 nearest block-level ancestor),包括table-related元素,基于top, right, bottom, 和 left的值进行偏移。偏移值不会影响任何其他元素的位置。
该值总是创建一个新的层叠上下文(stacking context)。注意,一个sticky元素会“固定”在离它最近的一个拥有“滚动机制”的祖先上(当该祖先的overflow 是 hidden, scroll, auto, 或 overlay时),即便这个祖先不是最近的真实可滚动祖先。这有效地抑制了任何“sticky”行为(详情见Github issue on W3C CSSWG)。
<!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>Document</title>
<style>
/* 粘性定位 */
/* 粘性定位可以被认为是相对定位和固定定位的混合。元素在跨越特定值前被认为是相对定位,之后为固定定位 */
*{
padding: 0;
margin: 0;
}
body{
height: 2000px;
}
div{
text-align: center;
line-height: 40px;
}
.header{
height: 40px;
width: 100%;
background-color: yellow;
position: fixed;
top: 0;
}
.banner{
height: 580px;
background-color: rosybrown;
margin-top: 40px;
}
.nav{
height: 40px;
background-color: royalblue;
position: sticky;
top:40px;
}
</style>
</head>
<body>
<div class="header">
头部
</div>
<div class="banner">
banner区域
</div>
<div class="nav">
导航栏
</div>
</body>
</html>