今晚来说说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来做到无论浏览器如何改变,都是相对浏览器的定位。
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 <html>
<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的相对位置是根据最近的一个兄弟作为参考的。都很好理解,不再解释。
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 <html>
<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变化前作为参考相对位置。
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 <html>
<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>

但是上面这个图画的有错误,若想看真实的图的效果,运行下面代码:
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 <html>
<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才能够更好精准布局。