原文地址:http://my.oschina.net/blogshi/blog/210238
在CSS佈局上float和position是永遠說不完的道不盡的話題,它們的應用五花八門,組合技巧千奇百怪.通常如果你不是一個很熟練的Csser,那麼你對與position肯定還是一知半解,比如說我自己...
position的屬性值大家應該是很熟悉的,static,absolute,relative,fixed.
這裏做個demo,一步步詳解position.
(1) 準備一些div,只加上背景色去區分它們,如下圖.
代碼:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
|
< html > < head > < meta
http-equiv = "Content-Type"
content = "text/html;
charset=utf-8"
/> < style > #example
{ float:
right; } #example
p { margin:
0 0.25em; padding:
0.25em 0; } #div-top, #div-footer
{ background-color:
#88d; color:
#000; } #div-1
{ width:
400px; background-color:
#000; color:
#fff; } #div-1-padding
{ padding:
10px; } #div-1a
{ background-color:
#d33; color:
#fff; } #div-1b
{ background-color:
#3d3; color:
#fff; } #div-1c
{ background-color:
#33d; color:
#fff; }
</ style > </ head > < body > < div
id = "example" >
< div
id = "div-top" > < p >id
= div-top</ p > </ div > < div
id = "div-1" > < div
id = "div-1-padding" > < p >id
= div-1</ p > < div
id = "div-1a" > < p >id
= div-1a</ p > < p >這是div-1的子div,div-1a.</ p > </ div > < div
id = "div-1b" > < p >id
= div-1b</ p > < p >這是div-1的子div,div-1b.</ p > </ div > < div
id = "div-1c" > < p >id
= div-1c</ p > < p >這是div-1的子div,div-1c.</ p > </ div > </ div > </ div > < div
id = "div-footer" > < p >id
= div-footer</ p > </ div > </ div > </ body ></ html > |
(3) relative 是相對定位,這個相對指的是元素的正常位置,就是相對於你不加position:relative;的情況進行了如何的偏移.加完這個屬性可以通過top,left,bottom,right進行位移設置.如果沒有設置這些位移僅僅設置position:relative;那麼元素位置不會有任何變化.
需要注意的是設置爲relative的元素,它默認佔有的空間還會繼續被該元素佔有,同時它不會影響其他相鄰元素.
1
2
3
4
5
6
7
8
|
#div-1
{ width:
400px; background-color:
#000; color:
#fff; position:
relative; top:
10px; left:
-20px; } |
(4) absolute 是絕對定位,這個屬性絕對是position的精髓所在.絕對定位元素會脫離文檔流,整個文檔會當做它不存在一樣去排版,並且它原先所佔有的空間也不會存在.
1
2
3
4
5
6
7
|
#div-1a
{ background-color:
#d33; color:
#fff; position:
absolute; top:
10px; left:
20px; } |
上面之所以div-1a是相對於html定位是在一定條件下得,並不是通用的.只有在絕對定位的任何祖先元素都沒有設置position值爲relative或absolute的情況下,它纔會比照html進行定位.
如果話被這麼說了,那麼可以聯想到relative+absolute這樣的組合一定會產生別的結果.
如果一個元素被絕對定位,那麼先在離自己最近的元素中看有沒有相對定位的元素,如果有則以此爲參照物.如果沒有則追溯祖先元素中有沒有相對定位的元素.
(5) relative + absolute = absolute以relative定位.
修改代碼:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
|
#div-1
{ width:
400px; background-color:
#000; color:
#fff; position:relative; } #div-1-padding
{ padding:
10px; } #div-1a
{ background-color:
#d33; color:
#fff; position:
absolute; } |
可以看到div-1a覆蓋了一部分的div-1b,大約一半左右.它變成相對於div-1定位了,而不是html.
(6) position佈局
通過relative+absolute就可以實現一些佈局效果.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
|
#div-1
{ width:
400px; background-color:
#000; color:
#fff; position:relative; } #div-1-padding
{ padding:
10px; } #div-1a
{ background-color:
#d33; color:
#fff; position:
absolute; top:
0; left:
0; width:
200px; } #div-1b
{ background-color:
#3d3; color:
#fff; position:
absolute; top:
0; right:
0; width:
200px;s } |
可以看到div-1a和div-1b的佈局,相對於div-1並且忽略了div-1的padding屬性.