今晚来说说CSS中的position属性，其实在实际开发页面过程中，记录一下这个让我迷茫的relative，我将它分为5种情况进行说明.
首先声明，情况很复杂，一句话总结就是：
横向排列用absolute，垂直排列用relative。
横向排列用relative行不行？可以，要求后面的div值比前面的小，还要考虑div高度，要算尺寸，麻烦。
垂直排列用absolute行不行？可以，但是要考虑前面div的高度，要算尺寸，麻烦。
不管怎么弄，div单元之间的左右间距始终都要计算div的宽度width是一件最大的麻烦事。垂直方向上如果用relativ就不存在这种问题。
- 包含关系：父级absolute，子级absolute；
- 包含关系：父级absolute，子级relative；
- 包含关系：父级relative，子级relative；
- 包含关系：父级relative，子级absolute；
- 并列关系：兄弟标签都是relative；
1.包含关系：父级absolute，子级absolute；最具常见的用法就是父级标签relative，子级标签position来做到无论浏览器如何改变，都是相对浏览器的定位。
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
<head>
<style>
#a{
height:200px;
width:200px;
position: absolute;
background-color:red;
left:50px;
top:50px;
}
#b{
height:50px;
width:50px;
position: absolute;
background-color:green;
left:20px;
top:30px;
}
#c{
height:50px;
width:50px;
position: relative;
background-color:blue;
left:20px;
top:20px;
}
</style>
</head>
<body bgcolor=yellow>
哈哈哈哈哈<br>000
<div id = "a">a000<br>000
<div id = "b">b
</div>
<div id = "c">c
</div>
</div>
</body>
</html>
运行结果如下：注意，父级absolute，子级absolute；在上方没有文字和其他内容时候，和父级relative，子级absolute运行效果是一样的。
结论：如果父是absolute，那么不管前面有什么内容，父级都是相对于浏览器有左边50px，上边50px的距离。
同样的，由于子也是absolute，所以不管父中有什么内容，子级都是相对于父有左边20px，上边20px的距离。
2.包含关系：父级absolute，子级relative；
那明白了第一点之后，第二点就很好明白了。
首先，父是absolute，那么不管前面是否有内容，父级一定是相对于浏览器上边和左边都是50px。
其次，子是relative，如果前面无内容，则相对于父的上边20px，如果前面有内容，则相对于父的内容的底边20px。相对，很好理解，就是变的。
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 | <html> <head> <style> #a{ height:200px; width:200px; position: absolute; background-color:red; left:50px; top:50px; } #b{ height:50px; width:50px; position: relative; background-color:green; top:20px; left:20px; } #c{ height:50px; width:50px; position: relative; background-color:blue; left:20px; top:30px; } #d{ height:50px; width:50px; position: relative; background-color:blue; left:20px; top:40px; } </style> </head> <body bgcolor=yellow> 哈哈哈哈哈<br>000 <div id = "a">a000<br>000 <div id = "b">绿色 </div> <div id = "c">蓝色 </div> <div id = "d">蓝色 </div> </div> </body> </html> |
我们这里一直没有讨论左边的情况，以为左边的情况是和上边一样的。但是实际上并不如此，虽然前面有内容，但是并不会产生左边避让的情况。只会有上下垂直方向的避让，并且bc两个兄弟的避让也很有意思。
1）避让只有垂直方向上的避让，并且c的top为30px的时候，c和b之间才产生10px的间距，这为什么呢？因为b的top间距为20px，所以c为30px时候，并不是相对于b产生30px的间距，而是相对于父和b总共产生30px的间距，而b自身又有20px的间距，所以c相对于b就只有10px的间距。这就是相对！
c相对于b间距（10px）=c的相对父top值（30px）-b的相对top值（20px）
同样的，c的兄弟d和c之间垂直方向的间隔也是这样计算出来的：
d相对于c间距（10px）=d的相对父top值（40px）-c的相对top值（30px）
2）横向水平不产生避让和间距。这语法设置的奇怪。
3）注意，上面的间距算法中，c相对于b间距和d相对于c间距，不会考虑b和c本身高度多少或者里面内容有多少。也就是说，不管b高度是10还是100，c相对于b间距都是10，这一点对于理解relative非常重要！！！
明白了这一点之后，用div做垂直方向上的间距布局就非常简单，下一个div（d）与上一个兄弟div（c）之间的间距如果想要100px，且上一个div（c）的间距为30px，那么下一个div（d）的间距就可以很快计算出来，为130px.
因为：
d的div值（130px）=d的相对父top值（130px）
d的相对父top值（130px）=-c的相对top值（30px）+d相对于c间距（10px）
所以：
d的div值（130px）=-c的相对top值（30px）+d相对于c间距（10px）
这样的话，写div布局就非常简单：下一个div要间距的话，直接在上一个div上直接做加法就可以！跟每个div里面的具体内容没有任何关系！
4）采用relative之后，不管是相对于浏览器还是父，都会对前面（上面）的文字产生避让，却不会对div产生避让，这也是一件很搞笑的事情。也是说，div之间都是兄弟，平等关系，不会避让则一定会并列连接接力。注意，这里是连接，不是重叠，也就是说bcd的div都设置为相同参数（比如20px）的时候，bcd会上下连成一串，而不是重叠，这就是relati和absolute的区别所在。进一步也就得出了推论5）。也就是relative下什么时候会bcd重叠？
5）由于垂直方向上上下要依次从上到下排列，所以下面的div值一定要大于上面的div值，如果下面的比上面小，就会出现重叠。如果下面的div写负值（比如-100px），那重叠是肯定的，只不过负值不符合逻辑，所以这个div只会紧贴父或者浏览器的上边缘。
还有一个问题就是，如果bcd没有父怎么样？很简单，结果不会变，只不过从相对于父的间距变成了相对于浏览器的间距，bcd的格局排列不会变。
3.包含关系：父级relative，子级absolute；正常情况下同1的效果，不过需要注意的是，当标签中包含文字时，relative会发生调整。
只要理解了1和2，或者说只要理解了relative和absolute本身的含义，那么后边的基本就不用讲了。relative和absolute的本质无非就是相对于父的距离算法还是相对于子的距离算法。
4.第4种情况，包含关系：父级relative，子级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 29 30 | <html> <head> <style> #a{ height:200px; width:200px; position: relative; background-color:red; left:50px; top:50px; } #b{ height:50px; width:50px; position: relative; background-color:green; top:20px; left:20px; } </style> </head> <body bgcolor=yellow> <div id = "a">a <div id = "b">b </div> </div> </body> </html> |
运行效果如下：
我是一条分割线。
5.当不存在父级元素包裹时，relative的相对位置是根据最近的一个兄弟作为参考的。都很好理解，不再解释。
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<head>
<style>
#a{
height:200px;
width:200px;
position: relative;
background-color:red;
}
#b{
height:200px;
width:200px;
position:relative;
background-color:green;
left:50px;
top:50px;
}
</style>
</head>
<body bgcolor=yellow>
<div id = "a">
</div>
<div id = "b">
</body>
</html>
但当a标签也设置了left、top等相关属性时，兄弟标签b继续以a变化前作为参考相对位置。
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
<head>
<style>
#a{
height:200px;
width:200px;
position: relative;
background-color:red;
left:50px;
top:50px;
}
#b{
height:200px;
width:200px;
position:relative;
background-color:green;
left:20px;
top:20px;
}
</style>
</head>
<body bgcolor=yellow>
<div id = "a">
</div>
<div id = "b">
</div>
</body>
</html>
但是上面这个图画的有错误，若想看真实的图的效果，运行下面代码：
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
<head>
<style>
#a{
height:200px;
width:200px;
position: relative;
background-color:red;
left:50px;
top:50px;
}
#b{
height:200px;
width:200px;
position:relative;
background-color:green;
left:20px;
top:20px;
}
#c{
height:200px;
width:200px;
position: relative;
border:2px solid #ccc;
background-color:none;
left:0px;
top:0px;
}
</style>
</head>
<body bgcolor=yellow>
<div id = "c">
</div>
<div id = "b">
</div>
</body>
</html>
所以真实的运行效果如下：
好了，写到这里，我们要问，如果兄弟标签不relative又会怎么样呢？
答案很简单，肯定不并列，重叠在一块啊！这会有用吗？特殊时候当然有用。比如底下背景我用一张图片，前面我叠加一个半透明色。效果难道不香吗？
总结：
1，如果是要横向做一排按钮或者超链接，那么子是必须用absolute的，为什么？因为如果用relative，而子一般都是有内容的，这样必然导致垂直方向上出现相对距离，而呈现梯田状。所以是不可能做成一排的。
所以在这个百度首页练习中，可以看到上边一行的超链是用absolute作的。
2，那么要是做竖向一列呢？
1），如果没有左右关系和兄弟，可以直接使用relative。像上面百度的布局，因为都是居中，没有左右关系，所以就是relative就可以。
2）如果存在左右关系和兄弟，也是横向布局，那么就必须使用absolute才能够更好精准布局。
