欧美free性护士vide0shd,老熟女,一区二区三区,久久久久夜夜夜精品国产,久久久久久综合网天天,欧美成人护士h版

首頁綜合正文

評論

柚子快報(bào)激活碼778899分享：css3 HTML5元素定位

Paypaymall跨境支付坊綜合2025-05-05530

柚子快報(bào)激活碼778899分享：css3 HTML5元素定位

http://yzkb.51969.com/

1.元素定位

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

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

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

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

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

特點(diǎn)：

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

這是一個(gè)p標(biāo)簽

跳轉(zhuǎn)百度

這是一個(gè)內(nèi)聯(lián)的span標(biāo)簽

html

javascript

1.2.相對定位

相對定位：以自身為基準(zhǔn)，設(shè)置坐標(biāo)（left、top、right、bottom），不脫離文檔流。

特點(diǎn)：

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

這是一個(gè)p標(biāo)簽

1.3.絕對定位

絕對定位：以父元素為基準(zhǔn)，設(shè)置坐標(biāo)，脫離文檔流。

特點(diǎn)：

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

這是一個(gè)p標(biāo)簽

1.4.固定定位

固定定位：以瀏覽器窗口為基準(zhǔn)，設(shè)置坐標(biāo)（left、top、right、bottom），脫離文檔流。

特點(diǎn)：

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

header

這是一個(gè)p標(biāo)簽

1.5.元素定位總結(jié)

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

1.6.z-index樣式

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

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

柚子快報(bào)激活碼778899分享：css3 HTML5元素定位

http://yzkb.51969.com/