任務11

首頁banner板塊的設計與制作任務

本任務案例結(jié)構(gòu)上比較簡潔，但是涉及的CSS知識點非常全面。通過完成“學習黨的二十大精神專題網(wǎng)”首頁banner板塊的設計與制作，要求熟練掌握使用定位實現(xiàn)各種排版需要。效果如圖所示。任務11首頁banner板塊的設計與制作首頁banner板塊效果任務11首頁banner板塊的設計與制作知識目標技能目標素質(zhì)目標（1）掌握定位屬性。（2）掌握定位方式。（3）掌握z-index層疊等級屬性。（1）能夠靈活使用定位進行頁面布局。（2）能夠在設計中解決樣式?jīng)_突問題。（1）掌握并遵循Web開發(fā)標準。（2）培養(yǎng)分析問題和解決問題的能力。（3）培養(yǎng)團隊協(xié)作精神。元素的定位定位的分類任務實現(xiàn)任務11首頁banner板塊的設計與制作1.元素的定位1.1元素的定位任務11首頁banner板塊的設計與制作

在CSS頁面布局時，通過position屬性來設置元素的定位模式。語法格式如下：

其中，static表示靜態(tài)定位，是默認的定位方式；relative表示相對定位，相對于其標準流的位置進行定位；absolute表示絕對定位，相對于其上一個已經(jīng)定位的父元素進行定位；fixed表示固定，相對于瀏覽器窗口進行定位；sticky表示粘性定位，會根據(jù)用戶的滾動位置進行定位。

position:static|relative|absolute|fixed|sticky;1.1元素的定位在確定了定位模式后，還要配合偏移的邊緣性來定義元素的具體位置，在CSS中主要通過top、right、bottom和left來精確定義定位元素的位置，具體含義如表所示：1.元素的定位clear的屬性值及其含義值含義top規(guī)定元素的頂部邊緣，定義元素相對于其父元素上邊線的距離right右側(cè)偏移，定義元素相對于其父元素右邊線的距離bottom底部偏移量，定義元素相對于其父元素下邊線的距離left左側(cè)偏移量，定義元素相對于其父元素左邊線的距離元素的定位定位的分類任務實現(xiàn)任務11首頁banner板塊的設計與制作2.定位的分類任務11首頁banner板塊的設計與制作2.1相對定位relative2.2絕對定位absolute2.3固定定位fixed2.4粘性定位sticky2.5定位元素的堆疊2.1相對定位relative

使用相對定位的元素，會相對于自身原本的位置，通過偏移制定的距離，到達新的位置。

使用相對定位，除了要將position屬性值設置為relative外，還需要指定一定的偏移量，其中水平方向的偏移量由left和right屬性指定；豎直方向的偏移量由top和bottom屬性指定。

相對定位元素不會脫離原來的標準流，在標準流中所占的空間不會改變。2.定位的分類2.2絕對定位absolute2.定位的分類當position屬性的取值為absolute時，可以將元素的定位模式設置為絕對定位。使用絕對定位的元素是以它的“最近”的一個“已經(jīng)定位”的“祖先元素”為基準進行偏移。如果沒有已經(jīng)定位的祖先元素，就以瀏覽器窗口為基準進行定位。

絕對定位元素完全脫離原來的標準流，也就不會占有原來標準流中的空間，和浮動類似。它的特點在于當絕對定位元素發(fā)生位移時，原先初始位置的內(nèi)容如同被去除了一樣，這個元素對立于其他頁面內(nèi)容，而初始位置的空白被其他內(nèi)容填補。元素絕對定位后生成一個塊級框，而不論原來它是何種類型元素。2.3固定定位fixed2.定位的分類當position屬性的取值為fixed時，可以將元素的定位模式設置為固定定位。固定定位是絕對定位的一種特殊形式，它以瀏覽器窗口作為參照物來定義網(wǎng)頁元素。固定定位元素是相對于視口定位的，這意味著即使?jié)L動頁面，它也始終位于同一位置。

固定定位元素與絕對定位元素一樣會脫離原來的標準流。低版本的IE瀏覽器不支持固定定位。2.4粘性定位sticky2.定位的分類當position屬性的取值為sticky時，可以將元素的定位模式設置為粘性定位。粘性定位可以被認為是相對定位和固定定位的混合。

元素會根據(jù)用戶的滾動位置進行定位，它開始會被相對定位，直到在視口中遇到給定的偏移位置為止，然后將其固定（粘貼）在指定的目標位置。也就是表現(xiàn)為在跨越特定偏移值前為相對定位，之后為固定定位。

使用top、right、bottom或left之一來設置偏移量，粘性定位就會生效，否則與相對定位相同。InternetExplorer，Edge15及更早IE版本不支持sticky定位。2.5定位元素的堆疊2.定位的分類當多個元素同時設置定位時，定位元素之間有可能發(fā)生重疊，在CSS中，要想調(diào)整重疊定位元素的堆疊順序，可以對定位元素應用z-index層疊等級屬性，屬性值不帶單位，默認值為0。一個元素可以有正數(shù)或負數(shù)的堆疊順序，具有更高堆疊順序的元素總是在較低的堆疊順序元素的前面。

如果兩個定位的元素重疊而未設置z-index屬性，則位于HTML代碼中最后的元素將顯示在頂部。元素的定位