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 等屬性，則顯示會在原來檔案流程中的位置，但因不存在於正常檔案流程中，所以會覆蓋後一個元素的顯示。
例子
<!DOCTYPE html>
<html><head>
<meta charset="utf-8">
<title>CSS中HTML元素定位Position參數可選值詳解</title>
<style type="text/css">
<!--
.box1, .box2, .box3, .box4 {
height:100px;
width:300px;
}
.box1 {
background-color: #333333;
color: #FFFFFF;
position:static;
left:300px;
top:200px;
/*
margin-top:100px;
*/
}
.box2 {
color: #FFFFFF;
background-color: #0000FF;
position:absolute;
left:350px;
top:250px;
}
.box3 {
color: #000000;
background-color: #CCCCCC;
position:relative;
left:400px;
top:100px;
}
.box4 {
color: #FF0000;
background-color: #66FF99;
position:fixed;
left:450px;
top:350px;
}
html, body {
margin-left: 0px;
margin-top: 0px;
font-size:16px;
background-color:background;
}
-->
</style>
</head>
<body>
<h1>元素(element)的定位(position)</h1>
<dl>
<dt>static</dt>
<dd>
<ul>
<li>元素的box模型其位置???殪o?B(static)即?含宣告了position:static</li>
<li>此?r若有宣告 top, right, bottom, left 等?儺砸???o效，因static的意思就是固定了位置。</li>
<li>此元素位於其它元素之後或之前，端?原始檔案中的元素出?先後?序，或? 此元素的位置位於正常的檔案流程之中(normal flow
of the document)不因 top, right, bottom, left 等?儺遠?淖?其位置，故?之??tatic。</li>
</ul>
</dd>
<dt>absolute</dt>
<dd>
<ul>
<li>元素的box模型其位置若?榻^??absolute)即???宣告了position:absolute</li>
<li>此?r若有宣告 top, right, bottom, left 等位移(offset)?儺?t??願岡?氐倪?界位置?榛?c，再作???木謔x?整。</li>
<li>此?r所?的父元素指的是前一??以absolute或relative宣告其位置的元素，若之前都?]有此定位的元素存在，?t以元素所在的?窗最大可?????界?榛?c。</li>
<li>?定??bsolute的元素??淮嬖陟墩?Ｎ募?鞽痰奈恢茫?部贍??采w其它元素。</li>
<li>若???宣告了position:absolute 但?]有宣告 top, right, bottom, left 等?儺裕?t?示??讜?砦募?鞽討械奈恢茫??蠆淮嬖陟墩?Ｎ募?鞽討校????采w後一??元素的?示。</li>
</ul>
</dd>
<dt>relative</dt>
<dd>
<ul>
<li>元素的box模型其位置若?橄??relative)即???宣告了position:relative</li>
<li>此?r若有宣告 top, right, bottom, left 等位移(offset)?儺?t??栽?乇舊碓謖?５奈募?鞽討?恢?榛?c，再作???木謔x?整。</li>
<li>?定??elative的元素在正常檔案流程的位置??弧副Ａ簟埂嚎鍘幌?恚??嗽?????op, right, bottom, left 等?儺緣鬧甘酒?頻街付ǖ奈恢蒙希?部贍??采w其它元素。</li>
<li>若???宣告了position:relative 但?]有宣告 top, right, bottom, left 等?儺裕?t?示位置??Ａ粼讜?茸隕淼謀Ａ粑恢蒙稀?lt;/li>
</ul>
</dd>
<dt>fixed</dt>
<dd>
<ul>
<li>元素的box模型其位置若?楣潭?fixed)即???宣告了position:fixed</li>
<li>此?r若有宣告 top, right, bottom, left 等位移(offset)?儺?t??栽?廝?詰囊?窗最大可?????界?榛?c，再作???木謔x?整。</li>
<li>?定??ixed的元素??淮嬖陟墩?Ｎ募?鞽痰奈恢茫?部贍??采w其它元素。</li>
<li>若???宣告了position:fixed 但?]有宣告 top, right, bottom, left 等?儺裕?t?示??讜?砦募?鞽討械奈恢茫??蠆淮嬖陟墩?Ｎ募?鞽討校????采w後一??元素的?示。</li>
</ul>
</dd>
<dt>有?追N移?釉?匚恢玫姆椒??lt;/dt>
<dd>
<ul>
<li>利用box模型的??界移?釉?匚恢謾?lt;/li>
<li>利用float?儺願?釉?匚恢謾?lt;/li>
<li>利用position移?釉?匚恢謾?lt;/li>
</ul>
</dd>
</dl>
<h2>所有元素皆???300px, 高100px</h2>
<hr>
<div class="box1">此 box1 元素的左位移?儺?00px, 上位移?儺?00px, 定位??tatic</div>
<div class="box2">此 box2 元素的左位移?儺?50px, 上位移?儺?50px, 定位??bsolute</div>
<div class="box3">此 box3 元素的左位移?儺?00px, 上位移?儺?00px, 定位??elative</div>
<div class="box4">此 box4 元素的左位移?儺?50px, 上位移?儺?50px, 定位??ixed</div>
<hr>
<h2>所有元素皆???300px, 高100px</h2>
</body></html>
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
