一：position说明
position
fixed 实现固定在某个位置
正常情况写两个div是在一层中，通过position属性，可以实现分两层和固定，就像在墙上贴了一层纸，就分了两层了。
postion通常结合top,left,right,bottom实现定位。
top:0 靠顶部为0
left:0 靠左边为0
right:0 靠右边为0
bottom:0 靠底部为0
二：postion实现返回顶部
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body>
<!-- 实现第一个div固定在右下角--> <div onclick="goTop()" style=" 40px;height: 50px;background-color: black;color: white;position:fixed;right:20px;bottom: 0;">返回顶部</div> <div style="height: 5000px;background-color: #2459a2"></div> <script> function goTop(){ document.body.scrollTop=0; //跳转顶部 } </script> </body> </html>
三：postion实现顶部菜单固定
问题1：position: fixed;//当这样的时候div就float起来，它就不是块，所以会出现不占全部行，通过left，right解决
/*当这样的时候div就float起来，它就不是块，所以会出现不占全部行，通过left，right解决*/
position: fixed;
top: 0;
left: 0;
right: 0;
问题2：第二个div内容部分没有了，所以要设置第二个div通过margin-top离顶部48px;
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .pg-header{ height: 48px; background-color: black; color:white; /*当这样的时候div就float起来，它就不是块，所以会出现不占全部行，通过left，right解决*/ position: fixed; top: 0; left: 0; right: 0; } .pg-body{ margin-top: 50px; background-color: #ff18a4; height: 5000px; } </style> </head> <body> <div class="pg-header">头部</div> <div class="pg-body">内容</div> </body> </html>