position屬性值4缺一帶你瞭解相對仍是絕對抑或是固定定位

時間 2020-02-16

標籤 position 屬性缺一瞭解相對仍是絕對抑或固定定位欄目 CSS 简体版

原文原文鏈接

阿基米德說「給我一個支點,我能翹起整個地球」，在HTML頁面中，給你一個座標，能夠把任何一個元素定位目標點，這就是定位！CSS有三種基本的定位機制：相對定位、絕對定位、固定定位，決定定位的position屬性的值有static默認標準流，固然這個就不用多說了；fixed固定定位，releative相對定位，absoulte絕對定位，結論以下:1.定位配合座標點top bottom left right;2.相對定位相對於自身位置自增或者自減，座標起點是原來所在位置;3.absolute絕對定位找最近的position屬性，沒有的話，就找父集進行定位。代碼展現：css

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6     <title>position屬性值4缺一帶你瞭解相對仍是絕對抑或是固定定位</title>
 7     <style type="text/css">
 8         div{
 9             width: 200px;
10             height: 200px;
11             color: #fff;
12         }
13         .box1{
14             width: 120px;
15             height: 50px;
16             line-height: 50px;
17             background-color: darkviolet;
18             position: fixed;
19             bottom: 100px;
20             right: 50px;
21             text-align: center;
22             border-radius: 5px;
23         }
24     /* 固定定位,常見頁面在線客服固定在某一個位置，怎麼解決？ */
25     /*配合定位 top bottom left right座標點分2組 top bottom / left right*/
26     /*bottom: 100px; 底部往上100px*/
27         .box2{
28             background-color: red;
29             /* position: relative;
30             left:200px;
31             top:30px; */
32         }
33     /*相對定位*//*相對於自身位置自增或者自減，座標起點是原來所在位置*/
34     /*向元素的原始上側位置增長30像素。*/
35     /*向元素的原始左側位置增長200像素。*/
36         .box3{
37             background-color: chartreuse;
38             /* position: absolute;
39             top: 100px;
40             left: 100px; */
41         }
42     /*發現box3添加絕對定位後位置飄到box2上面去了,box4上來了，box3的參考座標點是body*/
43     
44         .box4{
45             background-color: crimson;
46         }
47         .box5{
48             /* bottom: 300px;
49             right: 400px;
50             position: fixed; */
51             margin:0 auto;
52             position: relative;
53             background-color: darkmagenta;
54         }
55         .box6{
56             width: 100px;
57             height: 100px;
58             background-color:blue;
59             position: absolute;
60             top: 100px;
61             left: 100px;
62         }
63         /*結論absolute絕對定位找最近的position屬性，沒有的話，就找父集*/
64     </style>
65 </head>
66 <body>
67     <!--情景一絕對定位在外面-->
68     <div class="box1">hello!固定定位</div>
69     <!-- br*100 回車快捷鍵 展現以下-->
70     <div class="box2"></div>
71     <div class="box3"></div>
72     <div class="box4"></div>
73 
74     <!--情景二絕對定位在裏面-->
75     <div class="box5">
76         <div class="box6">絕對定位</div>
77     </div>
78 </body>
79 </html>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。