網頁布局絕對定位(position)輕松簡單

2024-07-11 08:24:18

字體：大中小

來源：轉載

供稿：網友

要想控制好層的絕對定位，只要理解CSS中關于定位（position）的定義，一切就會變得輕松簡單。
使用CSS來定位頁面內層的位置，一直是比較難以掌握的事情，很多時候，往往被絕對定位的元素，總是以瀏覽器的左上角為坐標原點，此時，如果瀏覽器的大小改變，被定義的層就會偏離設計想要的位置，讓人很撓頭。
其實，要想控制好層的絕對定位，只要理解CSS中關于定位（position）的定義，一切就會變得輕松簡單。
CSS中關于定位（position）是這樣定義的：
定位（position）允許用戶精確定義元素框出現的相對位置，可以相對于它通常出現的位置，相對于其上級元素，相對于另一個元素，或者相對于瀏覽器視窗本身。每個顯示元素都可以用定位的方法來描述，而其位置由此元素的包含塊來決定的。
包含塊（containing block）是格式編排發生的關聯場景，例如，一個加粗的元素的包含塊可以是該元素所出現的段落，如圖1所示。

在理解定位之前，首先，要先理解HTML文件的結構，例如有一個html文件內容如下：
<html><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>文檔結構</title></head><body><h1>CSS規則</h1><p>樣式表由一些<strong>樣式規則</strong>組成。</p><ul> <li>選擇符 <ul> <li>類選擇符</li> <li>ID選擇符</li> <li><em>包含</em>選擇符</li> </ul> </li> <li>屬性</li> <li>值</li></ul></ul></body></html>
此文檔對應的樹型結構，如圖2所示。

CSS大部分能力是基于元素的“父子”關系，在圖2的家族樹中，每個元素都是另一個元素的“父”或者“子”或者2者都是。例如：body既是html的子元素，又是h1的父元素，而html就是h1的祖先，h1則是html的子孫。
Body是所有瀏覽器能顯示的元素的祖先，而html是所有元素的祖先，也稱為“根元素”。
那為什么定位了的元素還總是以瀏覽器窗口的左上角為坐標呢？因為并不是每個元素都能為其后輩元素生成一個包含塊。
建立包含塊的規則如下：

根元素”的包含塊（也叫初始包含塊）由用戶代理生成，在HTML中，根元素是HTML元素，盡管有的瀏覽器會不正確地使用body元素。對于那些未絕對定位的非根元素來說，元素的包含塊設置為最近的塊級祖先元素的內容區邊沿。對那些使用絕對（absolute）作為定位（postition）的非根元素，包含塊設為最近的定位（postition）不是靜止（static）的祖先元素（任何類型）。有以下幾種情況：

上一篇：CSS3教程:邊框屬性border的極致應用

下一篇：IE6圖片元素img下出現多余空白的問題