CSS基础（8.position初识）
这里出现了JavaScripts的一些内容，其实不重要，理解position即可
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div onclick="GoTop();" style="width: 50px;height: 50px;background-color: black;color: white; position: fixed; bottom:20px; right: 20px; ">返回顶部 </div> <div style="height: 5000px;background-color: #dddddd;"> asdfasdf </div> <script> function GoTop() { document.body.scrollTop = 0; } </script> </body> </html>
可以发现，无论怎样改变浏览器大小，右下角总有一部分，这就是position的作用！
position:fixed的意思是让某个div固定在某个地方，这个地方用后边的bottom和right等来设置，后边的数字表示距离四个方位的距离
如果点击了右下角，那么就会返回顶部，这里是网页中常见的
接下来：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .header{ height: 48px; background-color: black; color: #dddddd; position: fixed; top:0; right: 0; left: 0; } .body{ background-color: #dddddd; height: 5000px; margin-top: 50px; } </style> </head> <body> <div class="header">头部</div> <div class="body">内容</div> </body> </html>
这里做了一个永远在最上边的div，也是很常见的，用来做菜单什么的。