Position

基本信息

漢語釋意：位置top right bottom left z-indexposition版本：CSS2　兼容性：IE4+ NS4+　繼承性：無語法：position : static | absolute | fixed | relative

取值

static默認值。無特殊定位，對象遵循HTML定位規則（忽略 top, bottom, left, right 或者 z-index 聲明）。absolute將對象從文檔流中拖出，使用 left ， right ， top ， bottom 等屬性相對於其最接近的一個最有定位設定的父對象進行絕對定位。如果不存在這樣的父對象，則依據 body對象。而其層疊通過z-index屬性定義fixed未支持。對象定位遵從絕對(absolute)方式。但是要遵守一些規範relative對象不可層疊，但將依據 left ， right ， top ， bottom 等屬性在正常文檔流中偏移位置

屬性分析

relativerelative屬性相對比較簡單，我們要搞清它是相對哪個對象來進行偏移的。答案是它本身的位置。在下面的代碼中，sub1和sub2是同級關係，如果設定sub1一個relative屬性，比如設定如下CSS代碼：#sub1{position: relative;padding: 5px;top: 5px;left: 5px;}我們可以這樣理解，如果不設定relative屬性，sub1的位置按照正常的文檔流，它應該處於某個位置。但當設定sub1為的position為relative後，將根據top，right，bottom，left的值按照它理應所在的位置進行偏移，relative的“相對的”意思也正體現於此。對於此，您只需要記住，sub1如果不設定relative時它應該在哪裡，一旦設定後就按照它理應在的位置進行偏移。隨後的問題是，sub2的位置又在哪裡呢？答案是它原來在哪裡，就在哪裡，它的位置不會因為sub1增加了position的屬性而發生改變。如果此時把sub2的position也設定為relative，會發生什麼現象？此時依然和sub1一樣，按照它原來應有的位置進行偏移。注意relative的偏移是基於對象的margin的左上側的。absolute這個屬性總是有人給出誤導。說當position屬性設為absolute後，總是按照瀏覽器視窗來進行定位的，這其實是錯誤的。實際上，這是fixed屬性的特點。當sub1的position設定為absolute後，其到底以誰為對象進行偏移呢？這裡分為兩種情況：（1）當sub1的父對象(或曾祖父，只要是父級對象)parent也設定了position屬性，且position的屬性值為absolute或者relative時，也就是說，不是默認值的情況，此時sub1按照這個parent來進行定位。注意，對象雖然確定好了，但有些細節需要您的注意，那就是我們到底以parent的哪個定位點來進行定位呢？如果parent設定了margin，border，padding等屬性，那么這個定位點將忽略padding，將會從padding開始的地方(即只從padding的左上角開始)進行定位，這與我們會想當然的以為會以margin的左上端開始定位的想法是不同的。接下來的問題是，sub2的位置到哪裡去了呢？由於當position設定為absolute後，會導致sub1溢出正常的文檔流，就像它不屬於parent一樣，它漂浮了起來，在DreamWeaver中把它稱為“層”，其實意思是一樣的。此時sub2將獲得sub1的位置，它的文檔流不再基於sub1，而是直接從parent開始。（2）如果sub1不存在一個有著position屬性的父對象，那么那就會以document（非body，當body有margin等屬性時，sub1並不受影響，除非body的position不為static）為定位對象，這個比較容易理解。3. fixedfixed是特殊的absolute，即fixed總是以body為定位對象的，按照瀏覽器的視窗進行定位。4. staticposition的默認值，一般不設定position屬性時，會按照正常的文檔流進行排列。說明檢索對象的定位方式。設定此屬性值為 absolute 會將對象拖離出正常的文檔流絕對定位而不考慮它周圍內容的布局。假如其他具有不同z-index屬性的對象已經占據了給定的位置，他們之間不會相互影響，而會在同一位置層疊。此時對象不具有外補丁( margin )，但仍有內補丁( padding )和框線( border )。要激活對象的絕對(absolute)定位，必須指定 left ， right ， top ， bottom 屬性中的至少一個，並且設定此屬性值為 absolute 。否則上述屬性會使用他們的默認值 auto ，這將導致對象遵從正常的HTML布局規則，在前一個對象之後立即被呈遞。設定此屬性值為 relative 會保持對象在正常的HTML流中，但是它的位置可以根據它的前一個對象進行偏移。在相對(relative)定位對象之後的文本或對象占有他們自己的空間而不會覆蓋被定位對象的自然空間。與此不同的，在絕對(absolute)定位對象之後的文本或對象在被定位對象被拖離正常文檔流之前會占有它的自然空間。放置絕對(absolute)定位對象在可視區域之外會導致滾動條出現。而放置相對(relative)定位對象在可視區域之外，滾動條不會出現。內容的尺寸會根據布局確定對象的尺寸。例如，設定一個 div 對象的 height 和 position 屬性，則 div 對象的內容將決定它的寬度( width )。此屬性對於 currentStyle 對象而言是唯讀的。對於其他對象而言是可讀寫的。對應的腳本特性為 position 。

套用實例

把元素的 position（位置）從 static（靜態，默認）改為 absolute（絕對）：

htmlheadscriptfunctiondisplayResult(){document.getElementById(b1).style.position=absolute;document.getElementById(b1).style.top=100px;document.getElementById(b1).style.left=100px;}/script/headbodypThisisaparagraph./ppThisisaparagraph./ppThisisaparagraph./ppThisisaparagraph./pinputtype=buttonid=b1onclick=displayResult()value=Positionme/body/html

Position歷年演唱過的歌曲

• 2004-07-17歌曲：Goodbye
• 2004-07-17歌曲：Blue
• 2004-07-17歌曲：Too Far Away
• 2004-07-17歌曲：Desperado
• 2004-07-17歌曲：Extra
• 2004-07-17歌曲：獻給新娘
• 2004-07-17歌曲：回到你身邊
• 2004-07-17歌曲：又一次離別
• 2004-07-17歌曲：I Love You More
• 2004-07-17歌曲：愛心
• 2004-07-17歌曲：不要離開
• 2004-07-17歌曲：Desperado II(天空都流淚的愛情)
• 2010-05-27歌曲：i love you
• 2010-05-27歌曲：futatsu no basho hit
• 2010-05-27歌曲：bojyou (itoshii hito
• 2010-05-27歌曲：tsuioku
• 2010-05-27歌曲：untitled
• 2010-05-27歌曲：kimi sumu machi e
• 2009-06-08歌曲：I love you 韓國超經典情歌

Position歷年專輯

• 2006年推出專輯：《Position》
• 2003年推出專輯：《Position Special》