淺談CSS中的定位知識

標籤：空間   基本   多個   應用   point   知識   格式化   定位   它的   

1，靜態定位（static）表示按照正常定位方案，元素盒按照在文檔流中出現的順序依次格式化；2，相對定位（relative）將移動元素盒，但是它在文檔流中的原始空間會保留下來；相對定位元素有如下幾個基本特徵：

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

2、使用一個到多個位移屬性（top、right、bottom、left）相對於它們在正常文檔流中的初始位置定位。沒有

設定位移屬性的，預設被設定為auto；

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

4、可能會覆蓋其它的元素。

3，絕對位置（absolute）是指元素盒徹底從文檔流中脫離出來，並相對於其容器塊進行定位。因為這些元素從文檔流中脫離出來，所以它們不再影響周邊的元素的布局，並且它們佔據的空間不被保留。絕對位置元素有如下幾個基本特徵：

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

2、使用一到多個位移屬性（top、right、bottom、left）相對於其容器塊的邊緣進行定位。沒有設定位移屬性的，預設被設定為auto。

位移值應用於元素盒的外邊緣（如果有margin值的話，就包括margin值）。

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

（例如，文本不會圍繞著它）

4，固定定位（fixed）與絕對位置類似，元素從文檔流中脫離，但是它們不是相對於容器塊定位，而是相對於視口（viewpoint）定位（大多數情況下，這個視口就是指瀏覽器視窗）。如果position屬性沒有設定，那麼就是靜態定位，固定定位目前有些瀏覽器不支援。

淺談CSS中的定位知識