目录
一、五种定位属性
1、静态定位static
2、相对定位 position: relative;
3、绝对定位 position: absolute;
4、固定定位 position: fixed;
5、粘滞定位 position: sticky;
二、粘滞定位应用案例
1、导航栏
2、返回顶部
一、五种定位属性
1、静态定位static
特点：默认文档流定位
2、相对定位 position: relative;
特点：设置相对定位，相对于自身本身在浏览器中的默认位置，不脱离文档流
配合属性同一方向的属性只能使用一个 top/left/right/bottom
3、绝对定位 position: absolute;
特点：
1.原来位置不保留 脱离文档流
2.默认使用了绝对定位元素无论有无父元素 参照点是body浏览器视口区域
3.如果祖先元素使用了定位属性 则相对于祖先元素定位
top: 20px;
4、固定定位 position: fixed;
设置固定定位
特性：脱离文档流 相对于浏览器视口区域
right: 20px; bottom: 20px;
5、粘滞定位 position: sticky;
特性：特性：不脱离文档流 原先位置保留 relative+fixed定位一个定位属性
默认相对定位达到阈值就是固定定位 设置两个以上的粘滞定位优先设置后加载的一个
top: 0;(设置固定时与顶部的距离)
二、粘滞定位应用案例
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>Document</title> <style> *{ margin: 0px; padding:0px; list-style: none; } .container{ width: 726px; height: 8000px; background-color: pink; margin:0 auto; } /* 设置导航栏粘滞定位 */ .container ul{ position: sticky; /* 粘滞定位 */ top: 0px; /* top: 40px; */ } /* 设置一级菜单样式 */ .container ul li{ /* 右边框 */ border-right: 1px solid white; width: 120px; height: 50px; /* 文字水平居中 */ text-align: center; /* 文字垂直居中 */ line-height: 50px; font-size: 20px; /* 设置左浮动 导航横向排布 */ float: left; background-color: rgb(120, 120, 203); } .container ul li a{ color: aliceblue; /* 清楚下划线 */ text-decoration: none; } </style> </head> <body> <div class="container"> <div style="height:300px;"></div> <ul> <li><a href="#">首页</a></li> <li><a href="#">亲子旅游</a></li> <li><a href="#">居家生活</a></li> <li><a href="#">宠物生活</a></li> <li><a href="#">美食酒水</a></li> <li><a href="#">个护清洁</a></li> </ul> </div> </body> </html>
效果如图：
图一为图片原始位置，图二为粘滞定位设置top为0px时展示的效果，导航条在到达据顶部0px后就固定不动了，图三为粘滞定位设置top为40px时展示的效果，导航条在到达据顶部40px后就固定不动了。
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>Document</title> <style> .head{ width: 1000px; height: 100px; margin: 0px auto; background-color: pink; } .body{ width: 1000px; height: 1000px; margin: 0px auto; background-color: skyblue; } button{ width: 100px; height: 40px; background-color: rgb(92, 92, 97); position: sticky; bottom: 20px; margin-top: 750px; } </style> </head> <body> <div class="head" id="head">顶部</div> <div class="body">体部</div> <button><img src="../images/上箭头.png" alt="上箭头"><a href="#head">返回顶部</a></button> </body> </html>
