我还记得那个调整了3个多小时才把确认按钮移动到table右边的夜晚。以至于前端给我的错觉就是，我写出我的思路，但它却不这么去展现。。mmp..
至此拾起来，从把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
29
30
| <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="position.css">
</head>
<body>
<div class="first">class first</div>
<div class="second">class second</div>
</body>
</html>
*{
margin: 0;
padding: 0;
}
.first{
width: 100px;
height: 100px;
background-color: #5060ff;
}
.second{
width: 200px;
height: 200px;
background-color: #ff7276;
}
|
两个div挨在一起。
添加position:relative等属性
1
2
3
4
5
6
7
8
| .first{
position: relative;
top: 50px;
left: 50px;
width: 100px;
height: 100px;
background-color: #5060ff;
}
|
蓝色背景的div根据top和left参数，位置上发生了改变。而红色div位置没有改变。
添加position:absolute等属性
1
2
3
4
5
6
7
8
| .first{
position: absolute;
top: 50px;
left: 50px;
width: 100px;
height: 100px;
background-color: #5060ff;
}
|
蓝色背景div根据top和left参数，位置上发生了改变，并且红色的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
| <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="position.css">
</head>
<body>
<div class="first">
<div class="second">
<div class="third"></div>
</div>
</div>
</body>
</html>
*{
margin: 0;
padding: 0;
}
.first{
width: 200px;
height: 200px;
background-color: #5060ff;
}
.second{
width: 100px;
height: 100px;
background-color: #ff7276;
}
.third{
width: 50px;
height: 50px;
background-color: #ffe43e;
}
|
三个方块重叠在一起
给third添加relative等属性
1
2
3
4
5
6
7
8
| .third{
position: relative;
top: 20px;
left: 20px;
width: 50px;
height: 50px;
background-color: #ffe43e;
}
|
黄色背景div基于原来位置根据top和left参数，位置上发生了改变。
再给second添加属性，去掉之前third的属性
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
| .second{
position: relative;
top: 30px;
left: 30px;
width: 100px;
height: 100px;
background-color: #ff7276;
}
.third{
<!-- position: relative;
top: 70px;
left: 70px;
--> width: 50px;
height: 50px;
background-color: #ffe43e;
}
|
黄色背景div跟随红色背景div移动。
恢复third的属性
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
| .second{
position: relative;
top: 30px;
left: 30px;
width: 100px;
height: 100px;
background-color: #ff7276;
}
.third{
position: relative;
top: 70px;
left: 70px;
width: 50px;
height: 50px;
background-color: #ffe43e;
}
|
黄色背景div在基于原来位置的基础上根据top和left参数，发生了改变。
给third添加absolute等属性
1
2
3
4
5
6
7
8
| .third{
position: absolute;
top: 70px;
left: 70px;
width: 50px;
height: 50px;
background-color: #ffe43e;
}
|
黄色背景div根据top和left参数，发生了变化。
再给second添加属性
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
| position: relative;
top: 30px;
left: 30px;
width: 100px;
height: 100px;
background-color: #ff7276;
}
.third{
position: absolute;
top: 70px;
left: 70px;
width: 50px;
height: 50px;
background-color: #ffe43e;
}
|
黄色背景div依据红色背景div再根据top和left参数，发生了变化。
去除second的属性，给first添加属性
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
| .first{
position: relative;
top: 70px;
left: 70px;
width: 200px;
height: 200px;
background-color: #5060ff;
}
.second{
width: 100px;
height: 100px;
background-color: #ff7276;
}
.third{
position: absolute;
top: 70px;
left: 70px;
width: 50px;
height: 50px;
background-color: #ffe43e;
}
|
黄色背景div依据蓝色背景div再根据top和left参数，发生了变化。
结论
- 脱离原来的位置(因为脱离原来的位置，所以其他元素可能会对原有位置进行占用)进行移动定位。
- 如果最近有父级，则根据父级定位，如果没有，则根据文档定位(因为body是最大的父级)
- 保留原来的位置，进行移动定位。
- 即便存在父级，也是相对(父级元素位置变动，相对位置也会变动)原来的位置进行移动定位。
absolute和relative配合
- 一般父级用relative做架子参照物，子级用absolute进行定位。
static和fixed
- static定位为默认情况，不会参照任何元素进行定位，按照浏览器预设的配置自动排版在页面上。
- fixed相对浏览器视窗定位，一直固定一个相同的位置，不会受到浏览器滚动条的影响。
refer
https://www.jianshu.com/p/f946aca4d6b0
