css---(position)

時間 2019-11-17
標籤 css position 欄目 CSS 简体版
原文原文鏈接
 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="width: 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="width: 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;width: 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>
相關標籤/搜索
CSS
每日一句
每一个你不满意的现在，都有一个你没有努力的曾经。