【注意】最后更新于 March 7, 2014,文中内容可能已过时,请谨慎使用。
1.理解文档流和定位(position)
文档流
是指文档中的盒子布局按html标签的顺序按从左到右、从上到下的顺序排列,其中每个块级元素独占一行,行内元素在一行之内按从左到右属性排列,每个盒子根据盒子模型都占据着自己的位置。
定位
是指可以使用css的position
属性来设置元素的定位类型,从而改变元素在文档流中的位置。
2.CSS定位(position)属性
static
: static是默认值,元素按正常的文档流布局方式(从上到下、从左到右、块级独占一行、行级元素在一行从左到右)在文档流中占据着自己的位置。
relative
: 将元素设置为相对定位元素。元素将相对于其自己原来在文档流中的位置进行偏移。元素自己在原来在文档流中占据的位置还将保留,只是它自己飘起来相对于自己原来的位置进行偏移。
absolute
: 将元素设置为绝对定位元素。元素将脱离文档流,不再占据自己原来在文档流中的位置,可以理解为漂浮在文档流的上方。绝对定位相对于上一个设置了定位的父级元素(relative, absolute, fixed)来定位,如果没有找到设置了定位的父级元素,则相对于body元素进行定位。
fixed
: 将元素设置为固定定位元素。元素将脱离文档流,不再占据自己原来在文档流中的位置,可以理解为漂浮在文档流的上方,相对于浏览器窗口进行定位。
关于relative
的使用场景,一般是将父级元素设置成relative相对定位,子级元素设置成绝对定位,这样子级元素的绝对定位是以父级元素作为参照物的,否则子级是相对于body来定位的。
使用position
进行定位时,需要借助四个方向上的偏移值属性分别是:
left
表示从左往右偏移
right
表示从右往左偏移
top
表示从上往下偏移
bottom
表示从下往上偏移
使用position
进行定位时,需要借助z-index
属性设置元素的层级。因为定位元素是浮动在正常的文档流之上的,z-index
用来设置元素发生叠加时谁盖住谁。
3.示例
1
2
3
4
5
6
|
<div class="container">
<div class="block1">block1</div>
<div class="block2">block2</div>
<div class="block3">block3</div>
<div class="block4">block4</div>
</div>
|
3.1 标准文档流布局
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
|
<style>
.container {
width: 800px;
height: 600px;
border: 1px solid black;
margin: 40px auto;
}
.block1, .block2, .block3, .block4 {
width: 200px;
height: 100px;
margin: 10px;
}
.block1 {
background: lightcoral;
}
.block2 {
background: lightslategray;
}
.block3 {
background: lightskyblue;
}
.block4 {
background: lightyellow;
}
</style>
|

3.2 相对定位(relative)
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
|
<style>
.container {
width: 800px;
height: 600px;
border: 1px solid black;
margin: 40px auto;
}
.block1, .block2, .block3, .block4 {
width: 200px;
height: 100px;
margin: 10px;
}
.block1 {
background: lightcoral;
}
.block2 {
background: lightslategray;
position: relative;
left: 100px;
top: 50px;
}
.block3 {
background: lightskyblue;
}
.block4 {
background: lightyellow;
}
</style>
|

3.3 绝对定位(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
|
<style>
.container {
width: 800px;
height: 600px;
border: 1px solid black;
margin: 40px auto;
}
.block1, .block2, .block3, .block4 {
width: 200px;
height: 100px;
margin: 10px;
}
.block1 {
background: lightcoral;
}
.block2 {
background: lightslategray;
position: absolute;
left: 100px;
top: 50px;
}
.block3 {
background: lightskyblue;
}
.block4 {
background: lightyellow;
}
</style>
|

因为绝对定位相对于上一个设置了定位的父级元素(relative, absolute, fixed)来定位,如果没有找到设置了定位的父级元素,则相对于body元素进行定位。
如果设置block2的父级元素container为相对定位,同时不设置偏移值,则block2的绝对定位是相对于container的。
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
|
<style>
.container {
width: 800px;
height: 600px;
border: 1px solid black;
margin: 40px auto;
position: relative;
}
.block1, .block2, .block3, .block4 {
width: 200px;
height: 100px;
margin: 10px;
}
.block1 {
background: lightcoral;
}
.block2 {
background: lightslategray;
position: absolute;
left: 100px;
top: 50px;
}
.block3 {
background: lightskyblue;
}
.block4 {
background: lightyellow;
}
</style>
|

3.4 固定定位(fixed)
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
|
<style>
.container {
width: 800px;
height: 600px;
border: 1px solid black;
margin: 40px auto;
}
.block1, .block2, .block3, .block4 {
width: 200px;
height: 100px;
margin: 10px;
}
.block1 {
background: lightcoral;
}
.block2 {
background: lightslategray;
position: fixed;
right: 50px;
top: 50px;
}
.block3 {
background: lightskyblue;
}
.block4 {
background: lightyellow;
}
</style>
|

4.总结
使用poistion
进行定位的三种属性值:
relative
是相对于自己在文档流中原来位置的定位,同时文档流会为其保留原来的位置
absolute
是寻找离自己的最近的设置了定位属性的(relative, absolute, fixed)的父级元素进行定位,如果找不到则相对于body进行定位,文档流不会为其保留原来的位置,会脱离文档流
fixed
是相对于浏览器窗口进行定位,文档流不会为其保留原来的位置,会脱离文档流
使用position
进行定位时,需要借助四个方向上的偏移值属性left
, right
, top
, bottom
控制元素的偏移,还可以借助z-index
属性设置元素的层级。因为定位元素是浮动在正常的文档流之上的,z-index
用来设置元素发生叠加时谁盖住谁。
参考