" position" CSS属性可让我们以与普通文本流不同的方式以及与" display" CSS属性不同的方式来定位HTML元素。

可以将CSS的position属性设置为以下值之一：

• static
• relative
• fixed
• absolute

这些值中的每一个都将在下面的部分中介绍。

位置：静态

将"位置"设置为"静态"值可使浏览器像正常情况一样呈现HTML元素。换句话说，" static"值是HTML元素的默认行为。通常，我们无需将"位置"设置为"静态"。相反，我们根本不会设置CSS的position属性。

职位：相对

将CSS的position属性设置为relative可使浏览器将HTML呈现在相对于HTML元素在常规文本和元素流中应呈现的位置。要指定放置HTML元素的位置，我们具有四个额外的CSS属性：

• top
• left
• bottom
• right

这是一个示例，该示例将HTML元素在流中的左侧和左侧分别定位为-20像素和20像素：

<style>    
#theRelativeSpan {
    position : relative;
    top      : -20px;
    left     : -20px;
    border   : 1px solid #cccccc; //shows the boundaries of the element.
}
</style>
<p>
  This is a paragraph with a lot of text inside, and a  <span id="theRelativeSpan">relative span element</span>
  as part of the text.
</p>

该浏览器屏幕快照显示了元素的呈现方式：

注意，span元素是如何在通常应放置的位置的左侧和上方渲染的。还要注意，在正常情况下将显示" span"的位置仍显示空白。

位置：固定

将CSS属性的position设置为fixed可使该属性所应用的HTML元素显示在浏览器窗口(视口)内的固定位置。即使用户垂直或者水平滚动HTML页面，或者调整浏览器窗口的大小，元素也将固定在浏览器窗口内的同一位置。

这是两个浏览器的屏幕快照，它们说明了position的作用：fixed CSS属性声明：

请注意，在第二个屏幕截图中，浏览器更高(浏览器已调整大小)，但是带有灰色背景的HTML元素仍位于浏览器窗口的底部。

位置：绝对

将CSS的position属性值设置为absolute的工作原理与fixed的值有点类似，但有一些例外。与"固定"一样，HTML元素相对于浏览器窗口(视口)定位，但是当用户水平或者垂直滚动时，HTML元素不会停留在视口内的同一位置。

看下面的示例代码：

<style>
  #theAbsoluteDiv {
      position: absolute;
      bottom  : 0px;
      background-color: #cccccc;
  }
</style>

<div id="theAbsoluteDiv">
  This text is positioned with <code>absolute</code> at the bottom of the browser window.
</div>

此示例将div元素设置为position：absolute，将div元素定位到浏览器底部0个像素。这是在带有更多文本的页面内呈现时的外观：

当调整浏览器窗口的大小时，div元素相对于浏览器窗口保持不变。我们可以在同一页面的该浏览器屏幕截图中看到，但浏览器的大小调整为更高：

但是，请注意当我们再次缩小浏览器窗口的大小，然后向下滚动页面时会发生什么。现在div元素突然在屏幕中间向上滚动：

位置：绝对内部其他位置元素

当一个元素具有CSS样式的position：absolute元素，并且该元素嵌套在另一个也设置了position值的元素内时，则带有position：absolute的元素绝对位于父元素的内部。

这是一个例子：

<style>
  #theOuterDiv {
      position: relative;
      top     : 0px;
      left    : 0px;
      border  : 1px solid #cccccc;
      padding : 10px;
  }

  #theInnerDiv {
      position: absolute;
      top     : 0px;
      right   : 0px;
      padding : 10px;
      background-color: #ccffcc;
      border  : 1px solid #99cc99;
  }

</style>

<div id="theOuterDiv">
  This is the outer div element.
  This is the outer div element.
  This is the outer div element.
  This is the outer div element.

  <div id="theInnerDiv">
      This is the inner div element.
  </div>
</div>

此示例将外部div元素的"位置"设置为"相对"。由于" top"和" left"被设置为" 0px"，因此外部" div"元素的位置恰好位于其位置，而无需将" position"设置为" relative"。

内部的" div"元素的"位置"设置为"绝对"，"顶部"设置为" 0px"，"正确"设置为" 0px"。这会将内部的" div"放置在其父元素内的右上角(因为父元素已设置" position：relative")。

这是在带有更多文本的页面内的浏览器中呈现时的外观：

请注意，内部div的位置现在在其父元素内是绝对的。