7.2 CSS position

CSS的 position 属性用来定义建立元素布局所用的定位机制。可以使用如下4个取值：

• static：静态定位，这是缺省值
• relative：相对定位
• absolute：绝对定位
• fixed：固定位置

为了计算位置偏移，我们还经常结合使用4个坐标（coordinates）属性：

• left
• right
• top
• bottom

任何元素都可以定位，不过绝对或固定元素会生成一个块级框，而不论该元素本身是什么类型。相对定位元素会相对于它在自然文档流中的默认位置来计算偏移。

静态定位（static）

这是默认值，没有定位。元素出现在自然文档流（natural flow）中（忽略 top, bottom, left, right 或者 z-index 声明）。

相对定位（relative）

当元素被设置成相对定位时，该元素可相对于正常位置进行移动。示例如下：

绝对定位（absolute）

当元素被设置成绝对定位时，该元素可相对于第一个被定位（positioned）的祖先元素进行移动。

一个被定位（positioned）的元素指的是它能被子元素用来作为参照点。我们用下面的例子来说明：

<section>
  I'm in position relative.
  <p>
    I'm in position absolute!
  </p>
</section>

section {
  background: gold;
  height: 200px;
  padding: 10px;
  position: relative; /* 这条规则把 <section> 转变成嵌套 <p> 元素的参考点。 */
}

p {
  background: limegreen;
  color: white;
  padding: 10px;
  position: absolute; /* 这条规则使得 <p> 元素可脱离文档流的约束而自由移动。 */
  bottom: 10px; /* 从底边向上移动10px */
  left: 20px; /* 从左边向右移动20px */
}

上例中的 section 元素的 position 属性被设置成 relative，这将使其成为所有子元素的参照点。

注意定义位置偏移的left 或 bottom，代表是从（from）这个位置到（to）相反方向的移动。

一个有趣的问题是，如果我们同时设置了left和right，浏览器会如何处理？

如果元素没有设置 width，同时设置 left: 0 和 right: 0 将把元素拉伸以横跨整个可用宽度。这等同于设置 left: 0 和 width: 100%。

如果设置了 width，那么 right 值将被忽略。我们可以认为在发生冲突时，左边值具有更高的权重。

固定位置（fixed）

当元素 position 属性被设置为 fixed时，它的行为和absolute类似，我们可以设置left/right/top/bottom的坐标位移。

唯一的区别在于，固定位置的参照点是视口（viewport）。也就是一个固定位置（fixed）的元素不会随页面滚动，总是保持在屏幕上可见。这个位置属性常被用来实现粘附效果的页头（Sticky header）。