实训随笔-定位

定位三种：
固定定位:相对于浏览器定位
相对定位（不会脱离原本的文档流）：相对于原本的位置（依然会占据原来的空间）
绝对定位：相对于离他最近的已定位父级定位

固定定位：永远都会相对于浏览器窗口进行定位，固定定位会固定在浏览器的某个位置，不会随滚动条滚动。

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <meta charset="utf-8">
 5     <meta name="viewport" content="width=device-width, initial-scale=1">
 6     <title></title>
 7     <style type="text/css">
 8         body{
 9             height: 10000px;
10         }
11         div{
12     width: 100px;
13     height: 100px;}
14             #guDing{
15                 background: lightblue;
16                 position: fixed;
17                 left: 500px;
18                 top: 200px;
19             }
20             #xiangDui{
21                 background: lightcoral;
22                 position: relative;
23                 left: 100px;
24                 top: 100px;
25             }
26         #jueDui{
27             background: lightgreen;
28             position: absolute;
29             left: 100px;
30             top: 100px;
31         }
32     </style>
33 </head>
34 <body>
35     <div id="guDing"></div>
36     <div id="xiangDui"></div>
37     <div id="jueDui"></div>
38 
39 </body>
40 </html>

 

posted @ 2021-11-07 15:26  小王12138  阅读(55)  评论(0)  编辑  收藏  举报