相对定位：
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>Document</title>
6 <style class="text/css">
7 .box{
8 width: 600px;
9 height: 600px;
10 border: 1px solid black;
11 }
12 .box .red{
13 width: 100px;
14 height: 100px;
15 background: red;
16 }
17 .box .green{
18 width: 100px;
19 height: 100px;
20 background:#00ff00;
21 position: relative;/*相对定位：相对原来的自己的位置偏移*/
22 right: -100px;
23
24 }
25 .box .blue{
26 width: 100px;
27 height: 100px;
28 background: blue;
29 }
30 </style>
31 </head>
32 <body>
33 <div class="box">
34 <div class="red"></div>
35 <div class="green"></div>
36 <div class="blue"></div>
37 </div>
38 </body>
39 </html>
绝对定位：
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>Document</title>
6 <style class="text/css">
7 .box{
8 width: 600px;
9 height: 600px;
10 border: 1px solid black;
11 margin: 50px auto;
12 position: relative;
13 }
14 .box .red{
15 width: 100px;
16 height: 100px;
17 background: red;
18 }
19 .box .green{
20 width: 100px;
21 height: 100px;
22 background:#00ff00;
23 position: absolute;/*绝对定位：相对于祖先定位元素进行位置偏移*/
24 right: -20px;
25 top: -20px;
26
27 }
28 .box .blue{
29 width: 100px;
30 height: 100px;
31 background: blue;
32 }
33 </style>
34 </head>
35 <body>
36 <div class="box">
37 <div class="red"></div>
38 <div class="green"></div>
39 <div class="blue"></div>
40 </div>
41 </body>
42 </html>
时间： 2024-12-19 23:16:06