CSS的四种布局方式static/relative/fixed/absolute

点此查看原文

• static
  static布局是HTML元素默认的布局方式，并且static布局的元素不会受到top/left/bottom/right属性的影响。布局元素的位置即其在标准文档流中的位置。

---

• relative
  相对布局是相对其在标准文档流中的位置而言的。设置其top/left/bottom/right属性会使该元素脱离标准文档流，但是其在标准文档流中的位置依然被保留，不会被其他元素填补。

---

• fixed
  fixed布局是相对于屏幕视点进行定位的，意味着即使拖动页面滚动轴移动时，采用该布局的元素相对屏幕的位置不发生改变。
  fixed布局可以使用top/left/bottom/right进行定位，采用fixed布局的元素完全脱离了标准文档流，其原来在标准文档流中的位置会被其他元素占据；

---

• absolute
  绝对定位元素是相对于其最邻近的已定位的祖先元素进行定位的。如果一个绝对定位的元素没有已定位的祖先元素，则使用document body作为已定位元素。这里所说的“已定位元素”指的是采用除了static以外的布局方式父元素，包括采用absolute定位的父元素。