盒子定位

在页面布局设计中，盒子定位是十分重要的内容。在 CSS中控制盒子的位置有多种方式：盒子的浮动定位，盒子的流动定位，以及通过 position属性控制盒子的位置。在此，主要介绍盒子的position定位。

1.静态定位（static）：

HTML元素的默认值，即没有定位，元素出现在正常的流中。

静态定位的元素不会受到top, bottom, left, right影响

2.固定定位（fixed）：

元素的位置相对于浏览器窗口是固定位置。

即使窗口是滚动的它也不会移动，除非在屏幕中移动浏览器窗口的屏幕位置，或改变浏览器窗口的显示大小。

3.绝对定位（absolute）：

绝对定位的作用是将元素从文档中拖出来。然后使用left，right，top，bottom属性相对于其最接近的一个具有定位属性的父包进行绝对定位。

代码实现：

实现效果：

4.相对定位：

相对定位完成的过程是首先按static方式生成一个元素，然后相对以前的位置移动，移动的方向和幅度由left，right，top，bottom属性确定，偏移前的位置保留不动。

代码实现：

实现效果：