1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <style> 7 .pg-header{ 8 height: 48px; 9 background-color: tan; 10 color: darkslateblue; 11 position: fixed; 12 top:0; 13 right: 0; 14 left: 0; 15 } 16 .pd-body{ 17 height: 5000px; 18 background-color: #dddddd; 19 margin-top: 50px; 20 position:relative; 21 width: 500px; 22 border: 1px solid red; 23 24 } 25 </style> 26 </head> 27 <body> 28 <!--现在有个黑色的框白色"返回顶部"字体, 默认是一层，黑色和灰色平行放着。我们要的效果是分层，把黑色的放到灰色背景上。--> 29 <!--<div style=" 50px;height: 50px;background: black;color: white;">返回顶部</div>--> 30 31 <!--增加position: fixed;表示这个div固定起来，并且可以分层叠起来，但是并没有指定固定在那里。我们还需要获取屏幕的高度和宽度--> 32 <!--position没有这么麻烦，直接有可以写top:0; right:0; 这个就是右上角，顶部为0，右边为0--> 33 <!--右下角：bottom: 20px;right: 20px;--> 34 <!--实现点击"返回顶部"立马拉到顶部，这个需要js实现--> 35 <div onclick="GoTop()" style=" 50px;height: 50px;background-color: black;color: white; 36 position: fixed; 37 bottom: 20px; 38 right: 20px; 39 ">返回顶部</div> 40 <!-- 高度5000像数制造一个分屏效果--> 41 <div class="pd-body" >主屏 42 <!--position: relative +absolute 可以组合 使用 ，相对定位--> 43 <div style="position: absolute;right: 0;top:0; 50px;height: 50px;background-color: lightcoral"> 44 相对位置 45 </div> 46 </div> 47 <div class="pg-header"> 48 头部 49 </div> 50 <script> 51 function GoTop(){ 52 // document.body.scrollTop = 0; 53 document.documentElement.scrollTop = 0; 54 // document.body.scrollTop = document.documentElement.scrollTop = 0; 55 } 56 </script> 57 </body> 58 </html>