CSS布局的三种方式

绝对定位

绝对定位：
​ 属性：position 值：absolute

 
正常文字1
正常文字2
"abs" >绝对定位的文字3
正常文字4
正常文字5
1
2
3
4
5
6
7
8
9
10
11
12
13
14

说明：设置了绝对定位的元素，相当于该元素被从原文档中删除了，所以“正常文字4”会紧接着出现。

绝对定位是基于最近的一个定位了的父容器
如果没有定位的div容器，默认是body

 
"position: absolute;width: 700px;">
      
正常文字1
      
正常文字2
      
"abs" >绝对定位的文字3
      
正常文字4
      
正常文字5
  
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

z-index

通过绝对定位可以把一个元素放在另一个元素上，这样位置就会重复，会存在一个谁掩盖谁的问题
z-index属性， 当z-index的值越大，就表示放上面，z-index:越小就表示放下面。

相对定位

属性：position
值： relative

与绝对定位不同的是，相对定位不会把该元素从原文档删除掉，而是在原文档的位置的基础上，移动一定的距离

  
正常文字1
正常文字2
"r" >相对定位的文字3
正常文字4
正常文字5
1
2
3
4
5
6
7
8
9
10
11
12
13
14

浮动

属性：float
值： left,right
可以用于文字环绕图片的效果

1. 左侧固定，右侧自动占满

 
"left">左边固定宽度
 
"right">右边自动填满
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

2. 左右固定，中间自适应

                     
  
"left">左边固定宽度
  
"right">右边固定宽度
  
"center">中间自适应
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

3. 贴在下方

                     
                    
"div1">
                        
"div2"> 无论蓝色div高度如何变化，绿色div都会贴在下面
                        
                    
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20