首页 > > 网页制作 > css >

position属性值4缺一带你了解相对还是绝对抑或是…

2020-02-15 16:02:15来源：博客园阅读 ()

position属性值4缺一带你了解相对还是绝对抑或是固定定位

阿基米德说“给我一个支点,我能翘起整个地球”，在HTML页面中，给你一个坐标，可以把任何一个元素定位目标点，这就是定位！CSS有三种基本的定位机制：相对定位、绝对定位、固定定位，决定定位的position属性的值有static默认标准流，当然这个就不用多说了；fixed固定定位，releative相对定位，absoulte绝对定位，结论如下:1.定位配合坐标点top bottom left right;2.相对定位相对于自身位置自增或者自减，坐标起点是原来所在位置;3.absolute绝对定位找最近的position属性，没有的话，就找父集进行定位。代码展示：

 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>