Position 详解

1、简介

  Position 属性规定元素的定位类型，其可用属性为：

• absolute：生成绝对定位的元素，相对于 static 定位以外的第一个 父元素进行定位。元素的位置通过 “left”、“top”、“right” 以及 “bottom” 属性进行规定。
• fixed：生成绝对定位的元素，相对于浏览器窗口进行定位。元素的位置通过 “left”、“top”、“right”、“bottom” 属性规定。
• relative：生成相对定位的元素，相对于其正常位置进行定位。元素的位置通过 “left”、“top”、“right”、“bottom” 属性规定。
• static：默认值。没有定位，元素出现在正常流中（忽略 “left”、“top”、“right”、“bottom” 或者 “z-index” 声明）。
• inherit：规定应该从父元素继承 position 属性的值。

2、static

  所有元素的默认 position 属性值为 static，这意味着所有元素没有被定位，元素出现在正常流中。
  通常不需要显式的定义该属性，除非你要重写之前的设置。

3、relative

  将 position 设置为 relative 后，就可通过 “left”、“top”、“right”、“bottom” 属性来设置位置，该位置是相对于自身相对于正常流中的位置，并且占位，即自身在正常流中的位置依旧存在。

注意：从上图中可以看出，虽然将 div1 通过 relative 移走后，它在原流中的位置，依旧存在，只不过是一个空的空间，下面的元素并没有移动。

4、absolute

  将 position 设置为 absolute 后，可将元素从正常流中移走（不占位），并通过 “left”、“top”、“right”、“bottom” 属性来设置位置。其相对于 static 定位以外的第一个父元素进行定位。

从上图可以看到，将 div1-2 设置为 absolute 后，通过 top 和 left 后将 div1-2 从正常流中移走，由于 absolute 设置后元素在正常流中不占位，所以 div1-3 上移与 div1-1 相邻。并且，由于其父节点使用的是默认位置 static 所以，其移动的位置是相对于 body ，故，div1-2 移动到了右上方。
  如果想相对以其父元素 div1 进行移动，要将 div1 的位置设置为除 static 外的其他属性。此处设置为 relative。

5、fixed

  将 position 设置为 fixed 后，可将元素从正常流中移走（不占位），并通过 “left”、“top”、“right”、“bottom” 属性来设置位置，该位置是相对于与浏览器窗口的，并且固定于该位置。

6、两列排列

  可以通过 relative 和 absolute 来设置两列排列。