1.元素的position属性的值默认为static 就是没有定位，元素出现在正常的文档流中，，这个时候你给这个元素设置的left,right,bottom,top这些偏移属性都是没有效果的, 使用相对定位时，就算元素被偏移了，但是他仍然占据着它没偏移前的空间, 绝对定位：position:absolute, 被设置了绝对定位的元素，在文档流中是不占据空间的，如果某元素设置了绝对定位，那么它在文档流中的位置会被删除.
2.父容器使用相对定位，子元素使用绝对定位后，这样的位置不再于浏览器左上角，而是相对于父容器左上角
3.相对定位和绝对定位需要top，right，bottom。Left使用来定制具体位置，这四个属性只有在该元素使用定位后才会生效，其他情况下无效。另外这四个属性同时只能使用相邻的两个，不能即使用上又使用下。或及时使用左，又使用右。
4.使用相对定位和绝对定位后，当频幕放大缩小，视图的位置也不会乱跑
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="utf-8">
5 <title>布局</title>
6 <style type="text/css">
7 .main{
8 width: 100%;
9 height: 800px;
11 margin: auto;
12 }
13 .a{
14
15 width: 20%;
16 height: 50%;
17 background-color: red;
19 position: relative;
20
21 }
22
23 .b{
24 margin-top: -400px;
25 width: 50%;
26 height: 80px;
27 margin-left: 20%;
28 background-color: green;
29 }
30 .c{
31
32 width: 50%;
33 height: 320px;
34 margin-left: 20%;
35 top: 80px;
36 background-color: yellow;
37
38
39
40 }
41 .d{
42 margin-top: -400px;
43 margin-left: 60%;
44 width: 20%;
45 height: 400px;
46 background-color: blue;
47 position: relative;
48
49
50 }
51 .g{
52
53 height: 90%;
54 background-color: cyan;
55
56
57 }
58
59 .h{
60 position: absolute;
61 top: 20%;
62 height: 80%;
63 width: 100%;
64 background-color: orange;
65
66 }
67 .f{
68 position: absolute;
69 top: 20%;
70 width: 100%;
71 height: 70%;
72 background-color: purple;
73
74 }
75 </style>
76 </head>
77 <body>
78 <div class="main">
79
80 <div class="a">a
81 <div class="f">列表</div>
82 </div>
83
84
85
86 <div class="b">b 图片</div>
87
88 <div class="c">c
89 <div class="g">g</div>
90
91 </div>
92
93 <div class="d">d
94 <div class="h">h</div>
95 </div>
96 </div>
97 </body>
98 </html>
时间： 2024-10-03 23:02:31