柚子快報激活碼778899分享：css3 HTML5元素定位

http://yzkb.51969.com/

1.元素定位

為了實現(xiàn)網(wǎng)頁整體布局，我們先要知道，一個元素，是如何定位到頁面上的某個位置的，這就是元素定位。

元素定位有四種，可以使用position樣式來設置元素定位，所以此屬性值有四種：

static：靜態(tài)定位（默認）。依據(jù)文檔流定位。relative：相對定位。以自身為基準，設置坐標（left、top、right、bottom），不脫離文檔流。absolute：絕對定位。以父元素為基準，設置坐標（left、top、right、bottom），脫離文檔流。fixed：固定定位。以瀏覽器窗口為基準，設置坐標（left、top、right、bottom），脫離文檔流。

1.1.靜態(tài)定位（文檔流定位）

靜態(tài)定位：默認。依據(jù)文檔流定位。

特點：

將頁面上的元素，按照html的書寫順序，從上到下，從左到右，依次排列。內聯(lián)元素不獨占一行，塊級元素獨占一行。

這是一個p標簽

跳轉百度

這是一個內聯(lián)的span標簽

• html
• css
• javascript

?

1.2.相對定位

相對定位：以自身為基準，設置坐標（left、top、right、bottom），不脫離文檔流。

特點：

以自身為基準定位。不脫離文檔流。也就是說：相對定位元素仍然會被文檔流中的其它元素所影響。根據(jù)坐標定位到新位置之后，并不回收原位置空間。

這是一個p標簽

這是一個p標簽

這是一個p標簽

?

1.3.絕對定位

絕對定位：以父元素為基準，設置坐標，脫離文檔流。

特點：

脫離文檔流。也就是說：絕對定位元素將不在被文檔流中的其它元素所影響。根據(jù)坐標定位到新位置之后，原位置空間會被回收。如果父元素也為relative或absolute定位，那么就以父元素為基準。如果父元素不是relative定位，也不是absolute定位，那么一律以body為基準。

這是一個p標簽

這是一個p標簽

這是一個p標簽

?

1.4.固定定位

固定定位：以瀏覽器窗口為基準，設置坐標（left、top、right、bottom），脫離文檔流。

特點：

元素始終固定在某個坐標位置，body以及body中的任何元素都不會對其產(chǎn)生任何影響。

這是一個p標簽

這是一個p標簽

這是一個p標簽

這是一個p標簽

這是一個p標簽

這是一個p標簽

這是一個p標簽

這是一個p標簽

這是一個p標簽

這是一個p標簽

這是一個p標簽

這是一個p標簽

這是一個p標簽

這是一個p標簽

這是一個p標簽

這是一個p標簽

這是一個p標簽

這是一個p標簽

這是一個p標簽

這是一個p標簽

這是一個p標簽

這是一個p標簽

這是一個p標簽

這是一個p標簽

1.5.元素定位總結

絕對定位不能有效擴展和維護。只能應用在某個局部。相對定位只限制自身，只能應用在某個局部。固定定位只限制自身，只能應用在某個局部。所以在實際開發(fā)中，都使用文檔流定位來進行頁面布局，就是靜態(tài)定位（默認）。它能夠隨著頁面元素的變化而自動調節(jié)。

1.6.z-index樣式

絕對定位元素與固定定位元素脫離了文檔流，可以把它想象為：此元素漂浮在網(wǎng)頁上方。 那么，當這些元素位置有重疊時，就會出現(xiàn)：元素之間如何覆蓋的問題。此問題可以使用z-index樣式來解決。

z-index樣式的值是一個整形數(shù)，就表示元素所在的層級。

?

柚子快報激活碼778899分享：css3 HTML5元素定位

http://yzkb.51969.com/

推薦文章