CSS布局模型——层模型

1.层模型--绝对定位：设置position:absolute(表示绝对定位)，这条语句的作用将元素从文档流中拖出来，然后使用left、                                                                                   right、top、bottom属性相对于其最接近的一个具有定位属性的父包含块进行绝对定位。如果不存在这                                                                            样的包含块，则相对于body元素，即相对于浏览器窗口。

                                                             div{                                                                         width:200px;                                                                         height:200px;                                                                         border:2px red solid;                                                                         position:absolute;                                                                         left:100px;                                                                         top:50px;                                                                    }

2.层模型--相对定位：设置position:relative（表示相对定位），它通过left、right、top、bottom属性确定元素在正常文档流                                                                              中的偏移位置。相对定位完成的过程是首先按static(float)方式生成一个元素(并且元素像层一样浮动                                                                                了起来)，然后相对于以前的位置移动，移动的方向和幅度由left、right、top、bottom属性确定，偏移                                                                             前的位置保留不动。

                        代码实现相对于以前位置向下移动50px，向右移动100px;                                                           #div1{                                                                          width:200px;                                                                          height:200px;                                                                          border:2px red solid;                                                                          position:relative;                                                                          left:100px;                                                                          top:50px;                                                                     }

3.层模型--固定定位：fixed：表示固定定位，与absolute定位类型类似，但它的相对移动的坐标是视图（屏幕内的网页窗                                                                                  口）本身。由于视图本身是固定的，它不会随浏览器窗口的滚动条滚动而变化。

                                                        #div1{                                                                          width:200px;                                                                          height:200px;                                                                          border:2px red solid;                                                                          position:fixed;                                                                          left:100px;                                                                          top:50px;                                                                    }

Relative与Absolute组合使用：

1、参照定位的元素必须是相对定位元素的前辈元素；

2、参照定位的元素必须加入position:relative；

3、定位元素加入position:absolute，便可以使用top、bottom、left、right来进行偏移定位了。