抱歉，您的浏览器无法访问本站

本页面需要浏览器支持（启用）JavaScript


了解详情 >

本文最初发表于博客园，并在GitHub上持续更新前端的系列文章。欢迎在GitHub上关注我，一起入门和进阶前端。

以下是正文。

CSS的定位属性有三种，分别是绝对定位、相对定位、固定定位。

1
2
3
4
5
6
position: absolute;  <!-- 绝对定位 -->

position: relative;  <!-- 相对定位 -->

position: fixed;     <!-- 固定定位 -->

下面逐一介绍。

相对定位

相对定位：让元素相对于自己原来的位置，进行位置调整（可用于盒子的位置微调）。

我们之前学习的背景属性中，是通过如下格式：

1
background-position:向右偏移量 向下偏移量;

但这回的定位属性，是通过如下格式：

1
2
3
position: relative;
left: 50px;
top: 50px;

相对定位的举例：

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
<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>Document</title>

	<style type="text/css">

		body{
			margin: 0px;
		}

		.div1{
			width: 200px;