CSS中的幾種定位簡介

標籤：position   布局   格式化   應用   容器   完全   瀏覽器   方法   規則   

相對於元素在正常情況下出現在頁面文檔流的位置，CSS提供了幾種方法來定位。

靜態定位（static）表示按照正常定位方案，元素盒按照在文檔流中出現的順序依次格式化；

相對定位（relative）將移動元素盒，但是它在文檔流中的原始空間會保留下來；

絕對位置（absolute）是指元素盒徹底從文檔流中脫離出來，並相對於其容器塊進行定位。因為這些元素從文檔流中脫離出來，所以它們不再影響周邊元素的布局，並且它們佔據的空間不被儲存；

固定定位（fixed）與絕對位置類似，元素從文檔流中脫離，但是它們不是相對於容器塊定位，而是相對於視口（viewpoint）定位（大多數情況下，這個視口就是指瀏覽器視窗）。

元素的容器塊：

　　1、根項目（html）建立的容器塊叫做“初始化容器塊”（有些瀏覽器將初始化容器塊放在body元素）。初始化容器塊的長方形盒子填充了瀏覽器視窗視口的大小。如果沒有其他容器塊，CSS就使用初始化容器塊；

　　2、對於被設定為靜態或者相對定位的非根項目，容器塊是它最近的區塊層級元素、表格單元的內容區的邊緣；

　　3、對絕對位置的非根項目，容器塊是它最近的不是靜態定位的祖先元素。

相對定位元素有如下幾個基本特徵：

　　1、使用CSS樣式規則{position:relative;}聲明；

　　2、使用一到多個位移屬性(top、right、bottom、left)相對於它們在正常文檔流中的初始位置進行定位。沒有設定位移屬性的，預設被設定為auto；

　　3、在文檔流中所佔據的原始空間被保留；

　　4、可能會覆蓋其他元素。

絕對位置元素有如下幾個基本特徵：

　　1、使用CSS樣式規則{position:absolute;}聲明；

　　2、使用一到多個位移屬性（top、right、bottom、left）相對於其容器塊的邊緣進行定位。沒有設定位移的，預設被設定為auto。位移值應用於元素盒的外邊緣（如果有margin值的話，就包括margin值）；

　　3、絕對位置的元素完全從文檔流中脫離出來。該元素在正常文檔流中所佔據的空間不保留，並且它不再影響其他元素（例如，文本不會圍繞它）。

 

 

　　

CSS中的幾種定位簡介