粘性定位可以被认为是相对定位的混合,Sticky粘性的
语法:
选择器{position:sticky;top:10px}
粘性定位的特点:
1.以浏览器的可视窗口为参照点移动元素(固定定位特色)
2.粘性定位是占有原先的位置(相对定位特点)
3.必须添加top,left,right,bottom其中一个才生效。
跟页面滚动搭配使用,兼容性差,IE不支持
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
body {
height: 3000px;
}
.nav {
position: sticky;
top: 0;
800px;
height: 50px;
background-color: pink;
margin: 100px auto;
}
</style>
</head>
<body>
<div class="nav">我是导航栏</div>
</body>
</html>