1，三种定位方式：relative,absolute,fixed.其中relative是相对于元素本身，absolute是相对于元素的第一个有定位的父级元素,fixed是相对于屏幕;
2,首先来解析第一个float与relative；
</body>
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
然后如果child1元素既设置了浮动也设置了position:relative，
显示如图
原因分析：child1元素既设置了float:left;又设置了position:relative，但是position:relative并不会覆盖float:left;它会使得浮动元素在浮动的位置上再相对定位;
3,float与absolute和fixed;
</body>
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
那么这时候生成的网页;
原因解析：当position为absolute或者fixed的时候,position定位会覆盖掉原来child1元素的float,使得浮动会失效,然后child2会移位到parent元素的最左边，与position:absolute定位元素item1相重叠
版权声明：本文为博主原创文章，转载请附上博文链接！