层模型的三种形式

层模型有三种形式：

1. 绝对定位(position: absolute)
2. 相对定位(position: relative)
3. 固定定位(position: fixed)

一、绝对定位（position: absolute）：

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

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

• 用了absolute就是在父元素所在的边界里面进行定位。
• absolute表里如一，移动了就是移动了，不在文档流之中。relative只是表面显示移动了，但实际还在文档流中原有位置，别的元素无法占据。
• 向右移动就相当于在左边left“塞” 一些东西（在这里是像素)进去；向下移动就要在上边top“塞”一些东西（像素）进去。

二、相对定位（position: relative）：

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

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

absolute表里如一，移动了就是移动了。relative只是表面显示移动了，但实际还在文档流中原有位置，别的元素无法占据原来的位置。

三、固定定位(position:fixed):

与absolute定位类型类似，但它的相对移动的坐标是视图（屏幕内的网页窗口）本身。由于视图本身是固定的，它不会随浏览器窗口的滚动条滚动而变化，除非你在屏幕中移动浏览器窗口的屏幕位置，或改变浏览器窗口的显示大小，因此固定定位的元素会始终位于浏览器窗口内视图的某个位置，不会受文档流动影响，这与background-attachment:fixed;属性功能相同。

应用：positive:fixed

• 霸屏广告！
• 置顶、扫码

Relative 和 Absolute 组合使用

相对于其它元素进行定位？

使用position:relative
前提：

1. 参照定位的元素必须是相对定位元素的前辈元素
2. 参照定位的元素必须加入position:relative
3. 定位元素加入position:absolute，便可以使用top、bottom、left、right来进行偏移定位了

总结：
要在父辈元素中加relative,因为你要相对该父辈进行定位 而在自辈元素中加absolute,再进行设置长宽高！