html中的div布局-CSS中的position属性

今晚来说说CSS中的position属性,其实在实际开发页面过程中,记录一下这个让我迷茫的relative,我将它分为5种情况进行说明.

首先声明,情况很复杂,一句话总结就是:

横向排列用absolute,垂直排列用relative。

横向排列用relative行不行?可以,要求后面的div值比前面的小,还要考虑div高度,要算尺寸,麻烦。

垂直排列用absolute行不行?可以,但是要考虑前面div的高度,要算尺寸,麻烦。

不管怎么弄,div单元之间的左右间距始终都要计算div的宽度width是一件最大的麻烦事。垂直方向上如果用relativ就不存在这种问题。

  1. 包含关系:父级absolute,子级absolute;
  2. 包含关系:父级absolute,子级relative;
  3. 包含关系:父级relative,子级relative;
  4. 包含关系:父级relative,子级absolute;
  5. 并列关系:兄弟标签都是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>

运行效果如下:

a
b

我是一条分割线。
在这里插入图片描述
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
&lt;html>
&lt;head>
&lt;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;
}
&lt;/style>
&lt;/head>
&lt;body bgcolor=yellow>
&lt;div id = "a">
&lt;/div>
&lt;div id = "b">
&lt;/body>
&lt;/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
&lt;html>
&lt;head>
&lt;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;
}
&lt;/style>
&lt;/head>
&lt;body bgcolor=yellow>
&lt;div id = "a">
&lt;/div>
&lt;div id = "b">
&lt;/div>
&lt;/body>
&lt;/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
&lt;html>
&lt;head>
&lt;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;
}

&lt;/style>
&lt;/head>
&lt;body bgcolor=yellow>
&lt;div id = "c">
&lt;/div>
&lt;div id = "b">
&lt;/div>
&lt;/body>
&lt;/html>

所以真实的运行效果如下:

好了,写到这里,我们要问,如果兄弟标签不relative又会怎么样呢?

答案很简单,肯定不并列,重叠在一块啊!这会有用吗?特殊时候当然有用。比如底下背景我用一张图片,前面我叠加一个半透明色。效果难道不香吗?

总结:

1,如果是要横向做一排按钮或者超链接,那么子是必须用absolute的,为什么?因为如果用relative,而子一般都是有内容的,这样必然导致垂直方向上出现相对距离,而呈现梯田状。所以是不可能做成一排的。

所以在这个百度首页练习中,可以看到上边一行的超链是用absolute作的。

2,那么要是做竖向一列呢?

1),如果没有左右关系和兄弟,可以直接使用relative。像上面百度的布局,因为都是居中,没有左右关系,所以就是relative就可以。

2)如果存在左右关系和兄弟,也是横向布局,那么就必须使用absolute才能够更好精准布局。

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: