在CSS中定位元素中,常用的就是相对定位(position:relative)和绝对定位(position:absolute),虽然都是用来定位,但是定位的机制却是相差甚远。
1、参照的位置
相对定位:对于相对定位来说,参照位置很简单就是元素在文档流中的初始位置。例如下面的这一段代码:
1 <!DOCTYPE html>
2 <html>
3 <head lang="en">
4 <meta charset="UTF-8">
5 <title></title>
6 <style>
7 #box1{
8 background: #0000ff;
9 width: 50px;
10 height: 50px;
11 border: #0000ff solid;
12 }
13 #box2{
14 background: fuchsia;
15 width: 50px;
16 height: 50px;
17 border: fuchsia solid;
18 }
19 #box3{
20 position: relative;
21 top: 50px;
22 left: 50px;
23 background: chocolate;
24 width: 50px;
25 height: 50px;
26 border: chocolate solid;
27 }
28 </style>
29 </head>
30 <body>
31 <div id="box1">box1</div>
32 <div id="box2">box2</div>
33 <div id="box3">box3</div>
34 </body>
35 </html>
View Code
这段代码里面,第三块box3就是从原始的顺序位置处向右边和下面各偏移50px。
绝对定位:绝对定位的参考对象稍微复杂一点,它必须用已经定位的父级元素作为参照,并且是由近到远开始搜索,如果没有找到,就以最顶层的元素(body)最为参照。请看下面两个例子。
1 <!DOCTYPE html>
2 <html>
3 <head lang="en">
4 <meta charset="UTF-8">
5 <title>相对定位与绝对定位</title>
6 <style>
7 #first{
8 /*这个距离更远,不被选择*/
9 position: relative;
10 width: 500px;
11 height: 500px;
12 border: #000000 solid;
13 }
14 #second{
15 width: 200px;
16 height: 200px;
17 border: #ff0000 solid;
18 }
19 #three{
20 /*这个已经定位了的元素距离目标元素最近,所以被选择为目标元素的参照*/
21 position: relative;
22 width: 100px;
23 height: 100px;
24 border: #00ff00 solid;
25 }
26 #box1{
27 background: #0000ff;
28 width: 50px;
29 height: 50px;
30 border: #0000ff solid;
31 }
32 #box2{
33 background: fuchsia;
34 width: 50px;
35 height: 50px;
36 border: fuchsia solid;
37 }
38 #box3{
39 position: absolute;
40 top: 50px;
41 left: 50px;
42 background: chocolate;
43 width: 50px;
44 height: 50px;
45 border: chocolate solid;
46 }
47 </style>
48 </head>
49 <body>
50 <div id="first">
51 <div id="second">
52 <div id="three">
53 <div id="box1">box1</div>
54 <div id="box2">box2</div>
55 <div id="box3">box3</div>
56 </div>
57 </div>
58 </div>
59 </body>
60 </html>
View Code
可以看到#three 块被选为了参照,二#two被抛弃。这就是绝对定位参照物选择的规律。
2、定位机制不一样
相对定位的在进行定位以后并不会从原始文档流中删除,依然占据原来的空间;而绝对定位却恰好相反,它会从原始的文档流中删除,重建一个块(无论之前元素是否为块元素)进行定位。继续看下面的例子。
绝对定位:
1 <!DOCTYPE html>
2 <html>
3 <head lang="en">
4 <meta charset="UTF-8">
5 <title>绝对定位</title>
6 <style>
7 #wrapper{
8 background: #ffffff;
9 width: 200px;
10 height: 200px;
11 border: #ff00ff solid;
12 }
13 #box1{
14 background: #0000ff;
15 width: 50px;
16 height: 50px;
17 border: #0000ff solid;
18 }
19 #box2{
20 position: absolute;
21 top: 50px;
22 left: 50px;
23 background: fuchsia;
24 width: 50px;
25 height: 50px;
26 border: fuchsia solid;
27 }
28 #box3{
29 background: chocolate;
30 width: 50px;
31 height: 50px;
32 border: chocolate solid;
33 }
34 </style>
35 </head>
36 <body>
37 <div id="wrapper">
38 <div id="box1">box1</div>
39 <div id="box2">box2</div>
40 <div id="box3">box3</div>
41 </div>
42 </body>
43 </html>
View Code
相对定位:
1 <!DOCTYPE html>
2 <html>
3 <head lang="en">
4 <meta charset="UTF-8">
5 <title>相对定位</title>
6 <style>
7 #wrapper{
8 background: #ffffff;
9 width: 200px;
10 height: 200px;
11 border: #ff00ff solid;
12 }
13 #box1{
14 background: #0000ff;
15 width: 50px;
16 height: 50px;
17 border: #0000ff solid;
18 }
19 #box2{
20 position: relative;
21 top: 50px;
22 left: 50px;
23 background: fuchsia;
24 width: 50px;
25 height: 50px;
26 border: fuchsia solid;
27 }
28 #box3{
29 background: chocolate;
30 width: 50px;
31 height: 50px;
32 border: chocolate solid;
33 }
34 </style>
35 </head>
36 <body>
37 <div id="wrapper">
38 <div id="box1">box1</div>
39 <div id="box2">box2</div>
40 <div id="box3">box3</div>
41 </div>
42 </body>
43 </html>
View Code
结果很明显,相对定位并没有删除原始文档流中的空间,而绝对定位缺删除了。
3、在第一部分中,绝对定位参考选择的问题中,已定位父级参考系的假设都是设置为position:relative,能不能设置为absolute呢?
答案:也是可以的,毕竟都是满足已经定位的父级元素。