有许多不同类型的定位，可以对HTML元素生效。要使某个元素上的特定类型的定位，我们要使用
position属性。
静态定位
静态定位是每个元素获取的默认值，它只是意味着“将元素放入它在文档布局流中的正常位置 。
相对定位
相对定位是我们将要看的第一个位置类型。 它与静态定位非常相似，占据在正常的文档流中，除了你仍然可以修改它的最终位置，包括让它与页面上的其他元素重叠。
介绍 top, bottom, left, right
top, bottom, left, 和 right 来精确指定要将定位元素移动到的位置。 要尝试这样做，请在CSS中的 .positioned 规则中添加以下声明：
top: 30px;
left: 30px;注意：这些属性的值可以采用逻辑上期望的任何单位 ——px，mm，rems，％等。
相对定位工作的方式——你需要考虑一个看不见的力，推动定位的盒子的一侧，移动它的相反方向。 所以例如，如果你指定 top: 30px;一个力推动框的顶部，使它向下移动30px。也就是说，力是往top方向使30排序，而效果是向bottom移动30px。
绝对定位
绝对定位带来了非常不同的结果。让我们尝试改变代码中的位置声明如下：
position: absolute;绝对定位的元素不再存在于正常文档布局流中。这表示我们可以利用绝对定位创建不干扰页面上其他元素的位置的隔离的UI功能。比如，弹出信息框和控制菜单；翻转面板等。