布局和定位

网页的三种布局

1. 流动模型（flow)
   flow:默认的网页布局模型。
2. 浮动模型（flow）
   可以让块级元素显示在一行，用到 float:left/right;

3. 层模型（layer）
   层模型有三种形式：
   (a)position:absolute;
   这种形式将元素从文档流中拖出，然后用left,right,top,bottom属性相对于最接近的一个具有定位属性的父包含块进行绝对定位，如果不存在，则相对于body即浏览器窗口

   (b)positon:relative;
   通过left,right,top,bottom属性确定元素在正常的文档流中的偏移位置。相对定位首先按照static(float)方式产生一个元素（并且元素像层一样浮动），然后相对于以前的位置移动，移动前的位置不变（虽然div元素相对于以前的位置产生了偏移，但是元素以前的位置还是保留着）。

   (c)position:fixed;
   它的相对移动的坐标是视图（屏幕内网页窗口），不会随着浏览器窗口的滚动条而改变，不受文档流的影响background-attachment:fixed属性相同。
   另外，relative和absolute组合使用使被设置元素不想对于浏览器定义

<div id="box1"><!--参照定位的元素-->
    <div id="box2">相对参照元素进行定位</div><!--相对定位元素-->
</div>

#box1{
    width:200px;
    height:200px;
    position:relative;        
}
#box2{
    position:absolute;
    top:20px;
    left:30px;         
}