html 的相对定位与绝对定位

css盒子的相对定位是相对原来的位置进行移动的。

  

该图的意思是：框2相对定位，等于对框进行了偏移。该框对于原来的框的位置向下移动了20px，向左偏移了30px;代码如下：

#box_relative {
  position: relative;
  left: 30px;
  top: 20px;
}

  绝对定位：绝对定位的元素的位置相对于最近的已定位祖先元素，如果元素没有已定位的祖先元素，那么它的位置相对于最初的包含块。

 提示：因为绝对定位的框与文档流无关，所以它们可以覆盖页面上的其它元素。可以通过设置 z-index 属性来控制这些框的堆放次序。

代码如下：

#box_relative {
  position: absolute;
  left: 30px;
  top: 20px;
}