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 等属性，则显示会在原来文件流程中的位置，但因不存在于正常文件流程中，所以会覆盖后一个元素的显示。

例子

元素(element)的定位(position)

static

 

  
• 元素的box模型其位置???殪o?B(static)即?含宣告了position:static

  
• 此?r若有宣告 top, right, bottom, left 等?傩砸???o效，因static的意思就是固定了位置。

  
• 此元素位於其它元素之後或之前，端?原始文件中的元素出?先後?序，或? 此元素的位置位於正常的文件流程之中(normal flow
  of the document)不因 top, right, bottom, left 等?傩远?淖?其位置，故?之??tatic。

 

absolute

 

  
• 元素的box模型其位置若?榻^??absolute)即???宣告了position:absolute

  
• 此?r若有宣告 top, right, bottom, left 等偏移(offset)?傩?t??愿冈?氐倪?界位置?榛?c，再作???木嚯x?整。

  
• 此?r所?的父元素指的是前一??以absolute或relative宣告其位置的元素，若之前都?]有此定位的元素存在，?t以元素所在的?窗最大可?????界?榛?c。

  
• ?定??bsolute的元素??淮嬖陟墩?Ｎ募?鞒痰奈恢茫?部赡??采w其它元素。
 
  
• 若???宣告了position:absolute 但?]有宣告 top, right, bottom, left 等?傩裕?t?示??谠?砦募?鞒讨械奈恢茫??虿淮嬖陟墩?Ｎ募?鞒讨校????采w後一??元素的?示。

 

relative

 

  
• 元素的box模型其位置若?橄??relative)即???宣告了position:relative

  
• 此?r若有宣告 top, right, bottom, left 等偏移(offset)?傩?t??栽?乇旧碓谡?５奈募?鞒讨?恢?榛?c，再作???木嚯x?整。

  
• ?定??elative的元素在正常文件流程的位置??弧副Ａ簟埂嚎铡幌?恚??嗽?????op, right, bottom, left 等?傩缘闹甘酒?频街付ǖ奈恢蒙希?部赡??采w其它元素。

  
• 若???宣告了position:relative 但?]有宣告 top, right, bottom, left 等?傩裕?t?示位置??Ａ粼谠?茸陨淼谋Ａ粑恢蒙稀?lt;/li>     
   

fixed

 

  
• 元素的box模型其位置若?楣潭?fixed)即???宣告了position:fixed

  
• 此?r若有宣告 top, right, bottom, left 等偏移(offset)?傩?t??栽?厮?诘囊?窗最大可?????界?榛?c，再作???木嚯x?整。

  
• ?定??ixed的元素??淮嬖陟墩?Ｎ募?鞒痰奈恢茫?部赡??采w其它元素。
 
  
• 若???宣告了position:fixed 但?]有宣告 top, right, bottom, left 等?傩裕?t?示??谠?砦募?鞒讨械奈恢茫??虿淮嬖陟墩?Ｎ募?鞒讨校????采w後一??元素的?示。

 

有?追N移?釉?匚恢玫姆椒??lt;/dt>

 

  
• 利用box模型的??界移?釉?匚恢谩?lt;/li>
    
• 利用float?傩愿?釉?匚恢谩?lt;/li>
    
• 利用position移?釉?匚恢谩?lt;/li> 
   

所有元素皆???300px, 高100px

所有元素皆???300px, 高100px