CSS 中 HTML 元素定位 Position 参数可选值详解

Question

Position 属性规定元素的定位类型。这个属性定义建立元素布局所用的定位机制。任何元素都可以定位，不过绝对或固定元素会生成一个块级框，而不论该元素本身是什么类型。相对定位元素会相对于它在正常流中的默认位置偏移。

默认值：	static
语法：	position : static | absolute | fixed | relative
继承性：	no
版本：	CSS2
JavaScript 语法：	object.style.position="absolute"

static

• 元素的 Box 模型其位置预设为静态 static，即隐含宣告了 position:static
• 此时若有宣告 top、right、bottom、left 等属性视为无效，因 static 的意思就是固定了位置。
• 此元素位于其它元素之后或之前，端视原始文件中的元素出现先后顺序，或说 此元素的位置位于正常的文件流程之中(normal flow of the document)不因 top, right, bottom, left 等属性而改变其位置，故称之为 static。

absolute

• 元素的box模型其位置若为绝对(absolute)即确实宣告了position:absolute
• 此时若有宣告 top, right, bottom, left 等偏移(offset)属性则会以父元素的边界位置为基点，再作对应的距离调整。
• 此时所说的父元素指的是前一个以absolute或relative宣告其位置的元素，若之前都没有此定位的元素存在，则以元素所在的视窗最大可视范围边界为基点。
• 设定为absolute的元素会不存在于正常文件流程的位置，也可能会覆盖其它元素。
• 若确实宣告了position:absolute 但没有宣告 top, right, bottom, left 等属性，则显示会在原来文件流程中的位置，但因不存在于正常文件流程中，所以会覆盖后一个元素的显示。

relative

• 元素的box模型其位置若为相对(relative)即确实宣告了position:relative
• 此时若有宣告 top, right, bottom, left 等偏移(offset)属性则会以元素本身在正常的文件流程之位置为基点，再作对应的距离调整。
• 设定为relative的元素在正常文件流程的位置会被「保留」『空』下来，但此元素会遵从top, right, bottom, left 等属性的指示偏移到指定的位置上，也可能会覆盖其它元素。
• 若确实宣告了position:relative 但没有宣告 top, right, bottom, left 等属性，则显示位置会停留在原先自身的保留位置上。

fixed

• 元素的box模型其位置若为固定(fixed)即确实宣告了position:fixed
• 此时若有宣告 top, right, bottom, left 等偏移(offset)属性则会以元素所在的视窗最大可视范围边界为基点，再作对应的距离调整。
• 设定为fixed的元素会不存在于正常文件流程的位置，也可能会覆盖其它元素。
• 若确实宣告了position:fixed 但没有宣告 top, right, bottom, left 等属性，则显示会在原来文件流程中的位置，但因不存在于正常文件流程中，所以会覆盖后一个元素的显示。

示例

.box2 {
  color: #FFFFFF;
  background-color: #0000FF;
  position:absolute;
  left:350px;
  top:250px;
}

点击这里查看示例：http://run.wenjiangs.com/code/#/?code=h3YxoC47