Yahoo!用戶界面博客（YUIBlog）

CSS position屬性

此屬性適用於所有的元素。 它有五個可能的值：

• static
• relative
• absolute
• fixed
• inherit

位置：靜態

從第9 可視化格式模型 ：

框是一個正常的框，按照正常流動奠定了。 top ， right ， bottom ，和left屬性並不適用。

我注意到在此演示

• 第二個框中顯示了它的確切位置，將沒有表態。
• 考慮到價值top 不適 ，因為在“靜態”的背景下， 框偏移的計算值始終是auto 。

需要記住的事情

• 如果一個元素的屬性的position具有價值的static ，該元素不說定位 。
• 因為static初始值（默認值），有沒有必要，除非它是覆蓋不同的價值包括在聲明塊造型。

位置：相對

從第9 可視化格式模型 ：

框的位置是按正常的流量（這就是所謂的正常流動中的地位）。 然後箱子被抵消相對其正常位置。 當一個盒子B是相對定位，下面的方塊的位置，不能抵消，雖然B組計算。

我注意到在此演示

• 盒子'兩個'向下移動300個像素，但框'三'，以及下面的段落留在地方。 它出現一樣，如果從頁面框被取消，其身後留下的足跡。 這是因為抵消了相對定位的框， 不干擾流 。
• 相對定位的框重疊的下列元素。 這表明在其他箱子的前面 。

需要記住的事情

• 計算出的值總是左=右，頂部=底部。 如果包含塊的direction是成為ltr ，'左'的勝利和“正確”的價值- '左'。 如果包含塊的direction是rtl ，“正確”的勝利和'左'被忽略。 作者可以採取同等價值相反的特性是如何工作的優勢。
• 與“絕對”的模式不同的是， top ， right ， bottom ，和left屬性不能伸展，也不縮小框（他們不能改變它的大小）。

位置：絕對

從第9 可視化格式模型 ：

框的位置（和可能的大小）指定的top ， right ， bottom ， left屬性。 這些屬性指定框的包含塊的偏移。 一個絕對定位的框從完全正常流動（它有沒有影響對後來的兄弟姐妹），並分配一個包含塊的位置。 此外，雖然絕對定位的框有利潤，他們不與任何其他的利潤率崩潰 。

我注意到在此演示

• 指定偏移，因為沒有框，盒子'兩個'沒有從原來的位置移動，但如果我們使用了top:0;left:0;例如，框會在視口的左上角 。
• 佈局明智的，它是像盒子'兩個'已與樣式display:none 。 從流框已被刪除。
• 盒子'三個'盒子'兩個'流出來，提出了反對盒'一'（遵循段）。
• 從流中刪除所有元素一樣，盒子'兩個'水平收縮包裝。

需要記住的事情

• 計算值display對於任何 “絕對”或“固定”的定位的元素是block 。
• 對於任何 “絕對”或“固定”的定位的元素計算值float是none 。
• 一個包含塊“是一個盒子，建立一個定位的情況下， 建立一個“地位”的“絕對”，“相對”或“固定”，它是由最近的祖先，這意味著父框可能不包含塊 。
• 一個絕對定位框的默認位置並不總是一樣的，如果它與頂部樣式：0;左：0;（LTR的上下文中）。 這是出於兩個原因：
  1. 最近的定位祖先建立的定位框的包含塊，如果沒有，參考容器是根元素。 在它的根元素的生命是一個長方形的包含塊稱為初始包含塊。 為連續介質，它的視口的尺寸（屏幕上的一個窗口或其他觀賞區），挂靠在畫布原點。 這個例子表明定位在視口中的對話框（默認包含塊）。
  2. 元素被放置在填充框，而不是內容框也包含塊的邊界框 。 這個新的例子演示盒'兩個'將是填充框的邊緣，如果沒有觸及內容框的邊緣（包含塊body ）。
• 框的大小 ，可能的結果top ， right ， bottom ， left屬性值。 舉例來說，清空所有屬性框拉伸，以配合其包含塊的填充框的尺寸。 清空所有框的偏移量 （注：IE6 不舒展盒）。
• 要創建一個面具覆蓋， 不滾動文件（如前面的例子 ），或者使用fixed ，而不是 absolute式body position:relative 初始定位塊 是視口（造型html不會在IE瀏覽器） 。 由於這疊加的演示顯示。
• position:absolute觸發hasLayout的 。

最重要的是要記住

因為這種定位計劃從流中刪除框，它被認為是壞的實踐Zhang佈局使用。

位置：固定

從第9 可視化格式模型 ：

固定的定位是絕對定位的子類。 唯一的區別是，對於一個固定的位置“框中，包含塊是由建立視口 。 對於連續介質 ，固定框不動文檔時滾動。 在這方面，它們是相似的固定背景圖像 。 分頁媒體 （如文件的內容分割成一個或多個離散頁），固定位置的框在每一頁上都重複。 這是有用的，例如，放置在每一頁的底部簽名。 大於頁面區域框固定的位置，被裁剪。 “固定位置”框中的初始包含塊不可見的部分將無法打印。

在本演示中要注意的事情：

• 由於固定的定位是絕對定位的子類，一切是真實的“絕對”也是真正的“固定”（元素收縮包裹，它是從流，等刪除）。
• 箱子被定位在視口中 ，它不會滾動頁面。
• 在IE 6中， 作為一個靜態框框出現，但有該“滑稽” 的解決方法 。
• 打印文件時，箱'兩個'出現在每一頁。

事情要記住：

• 根據“絕對”的模式框的位置計算，但框是固定的，除了一些參考。 在掌上電腦，投影，屏幕，TTY，電視媒體類型的情況下， 視口中的固定框和滾動時不動。
• 內容可能inaccessile短視用戶框的一部分，如果視口區域以外。
• 在打印介質類型的情況下，可能要防止每個打印頁上出現的元素。 也許使用@ media規則，如：

    @媒體印刷{ 
     ＃標誌的位置是：靜態;}
   } 

• 喜歡position:absolute ， position:fixed將觸發hasLayout的在IE瀏覽器。

位置：繼承

如果對於一個給定的框指定position:inherit ，那麼它會採取相同的計算值作為屬性框的父。

請注意，IE 6和7不支持這個關鍵字，除了與使用direction和visibility （見CSS屬性值的繼承 ）。

需要考慮的事情

框偏移

要知道，絕對和固定定位框，值設置在top ， right ， bottom的百分比， left是根據包含塊 （這可能不是父框）尺寸計算。

“位置”和“溢出”

風格一箱overflow:hidden剪輯相對定位元素（嵌套的框），但它不會總是隱藏絕對定位的。 這是因為父框並不總是包含塊（ 與最近的祖先的“位置”， “絕對”，“相對”或“固定”）。

總之，這意味著將顯示絕對定位的元素以外的一個盒子樣式與溢出：隱藏的，除非其包含塊的框本身或元素內說框中。 這個演示頁面顯示是如何工作的。

利潤率

作者可以使用的元素上的利潤，無論其定位計劃。

在IE的情況下

在IE瀏覽器，“定位”一個盒子可能是福還是禍：

• position:relative (with haslayout)在IE6中，可以用來防止負利潤率從風格箱被修剪父容器（見如何定位框解決這個問題）。
• 定位元素“ 打擾 ”的方式在IE 6和7箱堆疊，因為這可能會建立一個新的堆疊範圍內（見一個測試案例 ）。

堆疊順序堆疊水平

• 根據源代碼的順序， 定位框在前面的花車和正常流動箱。
• 通過“Z-索引” 只有在定位框的屬性，作者可以指定堆棧的水平。
• 在IE6和7，定位框簡單的事實，可以建立一個堆疊環境（見上面“ 的IE瀏覽器的情況下 “）。

移動設備

閱讀庫爾德工人黨的文章， [第六屆]位置值 ，找出為什麼手機瀏覽器廠商不能真正支持position:fixed 。

進一步閱讀

• 可視化格式模型
• 位置（CSS屬性）
• 表態

由DrLangbhani一個“鬼”的比喻：

一個元素的相對位置始終相抵消它在流動的正常位置 。 換句話說，它被轉移相對的地方，這將是正常情況下，轉移它不會影響它周圍的元素的佈局。 這背後已經離開它的身體像一個幽靈。 有寬度和高度和身體影響及其周邊地區，而且是無形的。 幽靈般的方塊是可以移動，但仍然連接到老的身體，在其立場仍然從它測量。 現在，一個元素的位置絕對是更容易。 它不再影響（它拉佈局流）及其周圍地區。 它現在是一個身體沒有留下真實的鬼。 至於它的同級元素關注它，如果它不再存在。 為了得到這個位置，通過它的父元素，直到你找到任一位置之一：相對的，位置固定，]或立場：絕對的。 該元素將作為參考點。 如果你沒有找到一個“定位”元素，只將它從文件偏移。

找到的談話： bloglines technorati

共享和擴展： 書籤del.icio.us Digg它！ | reddit！