1. 程式人生 > >web前端技術講解之CSS中position的定位技術

web前端技術講解之CSS中position的定位技術

使用position定位有四種方式,分別為absolute、relative、static、fixed,static是靜態定位,也為系統自動定位。下面主要分析其他三種定位方式的特點。

1. 絕對定位:position:absolute

(1) 絕對定位是將元素依據已經定位(絕對、固定或相對定位)的離他最近的祖先元素進行定位,祖先元素沒有定位或沒有祖先元素則預設依據body瀏覽器視窗定位。

(2) 絕對定位的元素不論本身是什麼型別,定位後都將成為一個新的塊級元素,如果未指定寬高度預設自適應實際包含的內容區域(不在預設瀏覽器寬度)。

(3) 絕對定位後的元素將處於賦予其他元素之上,自身不佔位置,他原來在正常文件流中所佔的空間同時被關閉,就是說絕對定位的元素不佔據頁面空間,原空間被後續元素使用。

絕對定位必須用left、right、top、bottom屬性之一啟用,用於指定元素左、右、上、下外邊距距離已定位祖先元素(或瀏覽器)左、右、上、下內邊框的距離。

如果定義多個屬性,當left、right、衝突時以left為準,當top、bottom衝突時以top為準,如果一個也不指定則元素扔按普通文件流佈局,但他自己不再佔據空間,後續元素上移與其重疊。

絕對定位元素定位後相對祖先元素的位置不在變化,若頁面內容較多拖動頁面滾動時,定位元素會隨頁面一起滾動。

絕對定位元素重疊覆蓋其他元素時可用z-index屬性設定他們的疊放次序。

2. 相對定位:position:relative

(1) 相對定位是讓元素(可以是行內元素)相對於它在正常文件流原位置按left、right、top、和bottom偏移量移動到新位置。

(2) 相對定位的元素移動後保持原外觀樣式大小,移動定位後不會佔據新空間會覆蓋新位置原有元素,原位置空間被保留,其他元素相對他原來的位置不變。

(3) Left、right、top、和bottom指定相對原位置移動的偏移量,可以使用帶單位數值、相對父元素的百分比%。

Left正值:左邊向內—向右移動,負值:左邊向外—向左。

right正值:右邊向內—向左移動,負值:右邊向外—向右。

top正值:上邊向內—向下移動,負值:上邊向外—向上。

bottom正值:下邊向內—向上移動,負值:下邊向外—向下。

3. 固定定位:position:fixed

固定定位與絕對定位absolute相似,定位後元素也生成為新塊級盒框、覆蓋新位置原有元素,在正常文件流中所佔的原空間關閉被後續元素使用。

固定定位與絕對定位absolute的區別是定位的元素無論父元素是否定位都會直接在瀏覽器視窗中定位,不會隨滾動條拖動頁面而滾動,固定定位用left、right、top、bottom指定瀏覽器左、右、上、下各邊向中心的偏移量作為定位元素外邊距位置

總結:元素的定位模型中需要區分每個屬性值的不同定位方式,分為絕對定位、相對定位、固定定位以及預設定位和繼承父元素。其中絕對定位和固定定位都脫離原本的文件流,而相對定位則遵循原本的文件流。設定元素的定位方式後,還需要指定偏移量。可以從上、右、下、左四個方向進行偏移。並且可以利用Z-index屬性設定元素之間的層疊順序。