7.3 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 */
}
I'm in position relative.

I'm in position absolute!

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

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

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

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

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

固定位置(fixed)

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

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