四种基本定位

什么是定位？

定位︰将盒子定在某一个位置，所以定位也是在摆放盒子，按照定位的方式移动盒子。

定位=定位模式＋边偏移。

定位模式用于指定一个元素在文档中的定位方式。边偏移则决定了该元素的最终位置。

• 定位模式：

  定位模式决定元素的定位方式，它通过CSS的position属性来设置，其值可以分为四个:

  值	语义
  static	静态定位
  relative	相对定位
  absolute	绝对定位
  fixed	固定定位

• 边偏移：

  边偏移属性	示例	描述
  top	top: 80px	顶端偏移量，定义元素相对于其父元素上边线的距离。
  bottom	bottom: 80px	底部偏移量，定义元素相对于其父元素下边线的距离。
  left	left: 80px	左侧偏移量，定义元素相对于其父元素左边线的距离。
  right	right: 80px	右侧偏移量，定义元素相对于其父元素右边线的距离

静态定位static

静态定位是元素的默认定位方式，无定位的意思。

一般可以直接省略。

相对定位relative

相对定位是元素在移动位置的时候，是相对于它原来的位置移动的。

语法∶

    选择器{ position: relative; }

相对定位的特点:

• 它是相对于自己原来的位置来移动的(移动位置的时候参照点是自己原来的位置)。

绝对定位absolute

绝对定位是元素在移动位置的时候，是相对于它祖先元素来说的（准确来说是有定位的祖先元素）。

语法∶

    选择器{ position: absolute; }

绝对定位的特点︰

• 如果没有祖先元素或者祖先元素没有定位，则以浏览器为准定位(Document文档)。

• 如果祖先元素有定位(相对、绝对、固定定位），则以最近一级的有定位祖先元素为参考点移动位置

• 绝对定位不再占有原先的位置。

• 子绝父相：子级是绝对定位的话，父级要用相对定位。

固定定位fixed

固定定位是元素固定于浏览器可视区的位置。主要使用场景∶可以在浏览器页面滚动时元素的位置不会改变。

语法︰

    选择器{ position: fixed; }

固定定位的特点:

• 以浏览器的可视窗口为参照点移动元素。

• 固定定位不再占有原先的位置（也可以看做是一种特殊的绝对定位）。