css position定位实例，static、relative、absolute、fixed属性演示

html:
<div class="static">
  static定位：static 是默认值。任意 position: static; 的元素不会被特殊的定位。一个 static 元素表示它不会被“positioned”，一个 position 属性被设置为其他值的元素表示它会被“positioned”。
</div>
<div class="relative">
  relative定位：在一个相对定位（position属性的值为relative）的元素上设置 top 、 right 、 bottom 和 left 属性会使其偏离其正常位置。其他的元素则不会调整位置来弥补它偏离后剩下的空隙。
</div>
<div class="fixed">
  fixed定位：一个固定定位（position属性的值为fixed）元素会相对于视窗来定位，这意味着即便页面滚动，它还是会停留在相同的位置。和 relative 一样， top 、 right 、 bottom 和 left 属性都可用。
</div>
<div class="absolute">
  absolute定位：absolute 是最棘手的position值。 absolute 与 fixed 的表现类似，除了它不是相对于视窗而是相对于最近的“positioned”祖先元素。如果绝对定位（position属性的值为absolute）的元素没有“positioned”祖先元素，那么它是相对于文档的 body 元素，并且它会随着页面滚动而移动。记住一个“positioned”元素是指p osition 值不是 static 的元素。
</div>

css:
.static {
  position: static;
  border:2px solid red;
}
.relative1 {
  position: relative;
}
.relative {
  position: relative;
  top: 20px;
  left: 20px;
  background-color: white;
  width: 500px;
  border:2px solid green;
}
.fixed {
  position: fixed;
  bottom: 0;
  right: 0;
  width: 200px;
  background-color: white;
  border:2px solid blue;
}
.absolute {
  position: absolute;
  top: 160px;
  left: 20px;
  width: 300px;
  height: 200px;
  border:2px solid pink;
}

演示地址：http://jscssshare.com/#/sample/S5MNxFPm