css---(position)

 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         }
21     </style>
22 </head>
23 <body>
24     <div class="pg-header">
25         头部
26     </div>
27     <!--现在有个黑色的框白色"返回顶部"字体, 默认是一层，黑色和灰色平行放着。我们要的效果是分层，把黑色的放到灰色背景上。-->
28     <!--<div style="width: 50px;height: 50px;background: black;color: white;">返回顶部</div>-->
29 
30     <!--增加position: fixed;表示这个div固定起来，并且可以分层叠起来，但是并没有指定固定在那里。我们还需要获取屏幕的高度和宽度-->
31     <!--position没有这么麻烦，直接有可以写top:0; right:0; 这个就是右上角，顶部为0，右边为0-->
32     <!--右下角：bottom: 20px;right: 20px;-->
33     <!--实现点击"返回顶部"立马拉到顶部，这个需要js实现-->
34     <div onclick="GoTop()" style="width: 50px;height: 50px;background-color: black;color: white;
35     position: fixed;
36     bottom: 20px;
37     right: 20px;
38     ">返回顶部</div>
39     <!-- 高度5000像数制造一个分屏效果-->
40     <div class="pd-body" >主屏
41     </div>
42     <script>
43         function GoTop(){
44             // document.body.scrollTop = 0;
45             document.documentElement.scrollTop = 0;
46             // document.body.scrollTop = document.documentElement.scrollTop = 0;
47         }
48     </script>
49 </body>
50 </html>
猜你喜欢
