Web前端開(kāi)發(fā)項(xiàng)目教程主講人：卞孝麗調(diào)整元素的層疊順序【任務(wù)目標(biāo)】

知識(shí)目標(biāo)掌握z-index層疊屬性；理解并掌握調(diào)整z軸方向上元素層疊順序的方法。

能力目標(biāo)能夠靈活調(diào)整元素的層疊順序；能夠根據(jù)應(yīng)用場(chǎng)景進(jìn)行變通，制作出特殊效果的網(wǎng)頁(yè)。

素質(zhì)目標(biāo)培養(yǎng)空間層次感，提升與人交流溝通時(shí)把握尺度的分寸感?！緦?dǎo)學(xué)知識(shí)】一、認(rèn)識(shí)層疊1.什么是層疊

當(dāng)多個(gè)元素同時(shí)設(shè)置定位脫離普通文檔流時(shí)，形成多個(gè)層，這時(shí)定位元素之間有可能會(huì)發(fā)生重疊，如果沒(méi)有對(duì)這些層進(jìn)行層疊設(shè)置，則一般在HTML中靠下面后添加的元素，其層疊順序越靠近用戶，即顯示在瀏覽器的最前面。如果需要改變這種層疊次序，可以使用z-index屬性。在CSS中，z-index屬性用于調(diào)整元素因定位發(fā)生堆疊時(shí)，元素在堆疊層的上下位置。

層疊的語(yǔ)法格式如下：z-index：auto|<integer>;參數(shù)值及其含義說(shuō)明如下：auto:遵從其父對(duì)象的定位方式；<integer>：選擇一個(gè)整數(shù)值來(lái)定義堆疊級(jí)別。【導(dǎo)學(xué)知識(shí)】

2.重疊元素

重疊元素，指的是在對(duì)元素進(jìn)行定位時(shí)，它們可以與其他元素重疊，具有較高層疊順序的元素始終位于具有較低層疊順序的元素之前【導(dǎo)學(xué)知識(shí)】3.層疊注意事項(xiàng)元素可以設(shè)置正或負(fù)的層疊順序，如果兩個(gè)定位的元素重疊而未設(shè)置z-index，則位于HTML代碼中最后的元素將顯示在頂部。當(dāng)多個(gè)元素同時(shí)設(shè)置定位脫離普通文檔流時(shí)，會(huì)形成多個(gè)層，這時(shí)定位元素之間有可能會(huì)發(fā)生重疊，如果沒(méi)有對(duì)這些層進(jìn)行層疊設(shè)置或是設(shè)置了相同的z-index屬性值，則一般在HTML中靠下面后添加的元素，其層疊順序越靠近用戶。設(shè)置z-index層疊屬性前后效果對(duì)比【導(dǎo)學(xué)知識(shí)】即顯示在瀏覽器的最前面，也就是依據(jù)它們的HTML文檔中流的順序?qū)盈B，保持原有的覆蓋關(guān)系，后面元素將會(huì)覆蓋前面元素的部分內(nèi)容。如果需要改變這種層疊次序，可以使用z-index屬性?！緦?dǎo)學(xué)知識(shí)】可以理解為z-index屬性設(shè)置了一個(gè)定位元素沿z軸的次序，z軸定義為垂直于顯示區(qū)的軸。z-index屬性的值為整數(shù)，可以是正整數(shù)，也可以是負(fù)整數(shù)和0，默認(rèn)為0，取值越大，定位元素在層疊元素中越居上層，也就是瀏覽器離用戶眼睛近越能被看到的位置，否則越遠(yuǎn)離用戶，居于底層，也就是z-index值大的層位于值小的層上面。注意z-index屬性僅對(duì)定位元素生效?！緦?dǎo)學(xué)知識(shí)】當(dāng)對(duì)多個(gè)元素同時(shí)設(shè)置定位時(shí)，定位元素之間有可能會(huì)發(fā)生重疊，如右圖所示。定位導(dǎo)致重疊z-index可以調(diào)整重疊定位元素的堆疊順序，其取值可為正整數(shù)、負(fù)整數(shù)和0。z-index的默認(rèn)值是0。解決重疊問(wèn)題【任務(wù)小結(jié)】

本節(jié)課我們學(xué)習(xí)了如何靈活調(diào)整元素的層疊順序，怎么根據(jù)應(yīng)用場(chǎng)景進(jìn)行巧妙變通，制作出特殊效果的網(wǎng)頁(yè)。

“世界很大，大到人們用一輩子也無(wú)法丈量完;世界很小，在家這一方寸之地，兜兜轉(zhuǎn)轉(zhuǎn)即是一生”。在Web開(kāi)發(fā)中，運(yùn)用空間的層