要想控制好層的絕對定位，只要理解css中關於定位（position）的定義，一切就會變得輕鬆簡單。
使用css來定位頁面內層的位置，一直是比較難以掌握的事情，很多時候，往往被絕對定位的元素，總是以瀏覽器的左上角為座標原點，此時，如果瀏覽器的大小改變，被定義的層就會偏離設計想要的位置，讓人很撓頭。
其實，要想控制好層的絕對定位，只要理解css中關於定位（position）的定義，一切就會變得輕鬆簡單。
css中關於定位（position）是這樣定義的：
定位（position）允許使用者精確定義元素框出www.cppcns.com現的相對位置，可以相對於它通常出現的位置，相對於其上級元素，相對於另乙個元素，或者相對於瀏覽器視窗本身。每個顯示元素都可以用定位的方法來描述，而其位置由此元素的包含塊來決定的。
包含塊（containing block）是格式編排發生的關聯場景，例如，乙個加粗的元素的包含塊可以是該元素所出現的段落，如圖1所示。
在理解定位之前，首先，要先理解html檔案的結構，例如有乙個html檔案內容如下：
文件結構
css規則
樣式表由一些樣式規則組成。
此文件對應的樹型結構，如圖2所示。
css大部分能力是基於元素的「父子」關係，在圖2的家族樹中，每個元素都是另乙個元素的「父」或者「子」或者2者都是。例如：body既是html的子元素，又是h1的父元素，而html就是h1的祖先，h1則是html的子孫。
body是所有瀏覽器能顯示的元素的祖先，而html是所有元素的祖先，也稱為「根元素」。
那為什麼定位了的元素還總是以瀏覽器視窗的左上角為座標呢？因為並不是每個元素都能為其後輩元素生成乙個包含塊。
建立包含塊的規則如下：
根元素」的包含塊（也叫初始包含塊）由使用者**生成，在html中，根元素是html元素，儘管有的瀏覽器會不正確地使用body元素。
對於那些未絕對定位的非根元素來說，元素的包含塊設定為最近的塊級祖先元素的內容區邊沿。
對那些使用絕對（absolute）作為定位（postition）的非根元素，包含塊設為最近的定位（postition）不是靜止（static）的祖先元素（任何型別）。有以下幾種情況：
a. 如果祖先元素是塊級（block）元素，包含塊設為祖先元素的填充（padding）邊沿，也就是被邊框（border）約束的區域
b. 如果祖先元素是內聯（inline）元素，包含塊設為祖先元素的內容邊沿。因此，絕對定位的元素往往以瀏覽器可視區域的左上為座標原點來進行定位了。
在css中可是使用position屬性來在不同的定位型別中選擇。
語法：position : static | absolute | fixed | relative | inherit
其各參msczi數含義是：
static: 靜態（預設），無特殊定位。
relative: 相對，物件不可層疊，但將依據left，right，top，bottom等屬性在正常文件流中偏移位置
absolute: 絕對，將物件從文件流中拖出，通過width、height、left，right，top，bottom等屬性與margin、padding、border進行絕對定位，絕對www.cppcns.com定位的元素可以有邊界，但這些邊界不壓縮。而其層疊通過z-index屬性定義。
fixed: 懸浮，使元素固定在螢幕的某個位置，其包含塊是可視區域本身，因此它不隨滾動條的滾動而滾動。（ie5.5 不支援此屬性。）
inherit: 這個值從其上級元素繼承得到。
示例：div
div
既然了解了包含塊的概念，那麼對於相對定位和絕對定位的關係，就很好掌握了。
例如，現在需要把頁面內容整體居中，然後再將其中某些層絕對定位的話，那就要把最外面的層設定定位屬性。
每個顯示元素都可以用定位的方法來描述，而其位置由此元素的包含塊來決定的。
此時，如果你要對n**絕對定位，則需設定css：
body
#box
#n**
其顯示效果如圖3所示。
因此，掌握了包含塊的概念，定位就變得不那麼困難了。
本文標題: 網頁布局絕對定位(position)輕鬆簡單
本文位址:
CSS的相對定位和絕對定位（position）
定位 position 故名思議，就是確定元素在頁面中的位置。css的常用定位有兩種，一種是相對定位，一種是絕對定位。下面我們看例子 id div0 id div1 id div2 有三個div，其中乙個大的 div0，裡面含有兩個子div，div1和 div2。可以看到，大的黃色 div0，巢狀了...
絕對定位布局
position屬性設定，能夠實現橫向多列布局及較為複雜的定位，比如帶有遮罩層效果的提示框 固定層效果 全屏廣告等。position擁有3種定位形式 1 靜態定位 2 相對定位 3 絕對定位。position可以設定4個屬性值 1 static 靜態定位 2 relative 相對定位 3 abso...
理解絕對定位和相對定位布局
p 22,null,left 概要 本文主要描述xhtml中相對定位和絕對定位各自的本質 用法 區別和兩者之間的關係。以及使用css的left right top bottom屬性 偏移屬性 和margin屬性 外邊距 對定位塊級元素進行布局的方法。p 22,null,left 說明 佔位空間 元素...